@extend throws error when extended directive contains media query containing referencing parent selector

[telekid]

test.scss

%dog {
    @media (min-width: 10px) {
        &:hover {
            display: none;
        }
    }
}

.puppy {
    @extend %dog;
    background-color: red;
}

Throws error in libsass:

{
  "message": "You may not @extend an outer selector from within @media.\nYou may only @extend selectors within the same directive.\nFrom \"@extend %dog\" on line 10 of test.scss\n",
  "column": 14,
  "line": 3,
  "file": "/Users/jake/Development/bug-test/test.scss",
  "status": 1
}

But correctly generates the following in Ruby Sass 3.4.13 (Selective Steve):

@media (min-width: 10px) {
  .puppy:hover {
    display: none; } }

.puppy {
  background-color: red; }

Note that I'm using libsass 3.2.x through this fork of node-sass:
CandoImage/node-sass@d2b9b88

[drewwells]

👍 commit fixed @extend errors

[Awem]

maybe still an issue? see: twbs/bootstrap-sass#879 (comment) and webpack-contrib/sass-loader#72 (comment)

[xzyfer]

The fix for this is only in Libsass >= 3.2.0-beta.3, and not in any node-sass release.

If you can reproduce this issue in [email protected] please let us know and we will reopen this issue.

[dalvarez]

@krzkrzkrz I'm getting the same issue to (using broccoli-sass in an ember-cli project)

[krzkrzkrz]

I am using broccoli-sass in an Ember CLI app (v0.2.2). I seems broccoli-sass is using libsass, I get:

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .input-sm" on line 48 of tmp/tree_merger-tmp_dest_dir-VAbune7B.tmp/app/styles/bootstrap/_input-groups.scss

Downgrading broccoli-sass to a previous version (0.6.2) doesn't render any issues:

npm uninstall --save-dev broccoli-sass
npm cache clean
npm install --save-dev [email protected]

Reference: joliss/broccoli-sass#59 (comment)

[Awem]

@krzkrzkrz broccoli-sass uses libsass via node-sass, which is still using 3.2.0-beta.2

[dalvarez]

@krzkrzkrz that fixed it for me too - when you uninstall and then reinstall, it switches node-sass version to [email protected] which doesn't have the bug.

[krzkrzkrz]

@AW-UC should I report this on the node-sass repo as well?

@dalvarez glad to hear

[Awem]

@krzkrzkrz no, it's already reported.

[ghost]

@xzyfer I still got issues where '@extend' doesn't work while using the following

"node-sass": "^4.1.1"

[xzyfer]

@ajjublr please don't comment on closed issues. Create a new issue showing the extend code that isn't working.