sass: Don’t recognize extendable selectors outside of @media contexts

Sass 3.2 is throwing this error:

DEPRECATION WARNING on line 20 of /Users/scottkellum/Sites/Singularity/framework/example/sass/oocss-responsive.scss:
  @extending an outer selector from within @media is deprecated.
  You may only @extend selectors within the same directive.
  This will be an error in Sass 3.3.
  It can only work once @extend is supported natively in the browser.

for this code:

@mixin foo {
  .foo {
    width: 100%;
  }
}

@include foo;

@media (min-width: 20em) and (max-width: 40em) {
  @include foo;
  .bar {
    @extend .foo;
  }
}

It seems like Sass should be ignoring the selectors outside the @media context for this new @extend behavior and result in no errors.

About this issue

Original URL
State: closed
Created 12 years ago
Reactions: 3
Comments: 27 (6 by maintainers)

Most upvoted comments

I am new to SASS and I just learned and saw the power of %placehoders. This is a much better way than using mixins for repeating code.

Today I first saw this Warning “@extending an outer selector from within @media is deprecated” and I was very disappointed because of the mentioned “This will be an error in Sass 3.3”.

If one uses it the wrong way it will not work, but if someone knows what he is doing, this is a great way to reduce size of compiled CSS.

By turning the warning into an error, you protect the bungling at a very high cost, by limit the gifted.

You asked for some example code. I made a mixin recently which I wanted to discuss. Let’s see, if I am gifted or should be protected 😉 My mixin was made to show the background of a susy header or footer or whatever over the full width of the parent container. I hope that this can prove @extend in @media is quite important:

@mixin banner-bg($height, $bgColor, $opacity:null, $extends:null) {

    &%xxx{
        height:$height;
        background-color: $bgColor;
        @if $extends != null {@extend #{$extends} }
    }

    @extend %xxx;
    @extend %bannerbg;

    &:before{
        @extend %xxx;
        @if $opacity != null {@include opacity($opacity);} 
        content: "";
        position: absolute; 
        right: 0; 
        left: 0; 
        z-index:-100; 
    }
}

The Placeholder %xxx causes this strange warning, although it is 100% sure that the two elements that use that Placeholder will be in the same @Media section. I do not understand why this should be prohibited. And ask you to rethink changing this to an ERROR and keep it as a WARNING.

Hannes-III on May 27, 2013

Sorry, maybe I didn’t make that clear. I do not want this behavior: .foo {a: b} @media screen {.bar {@extend .foo}}

Well, I am fine with that behavior, but the issue here is that the new behavior is not consistent. If the contexts are explicitly different then: .foo {a: b} .bar {@extend .foo} @media screen { .foo {a: b} .bar {@extend .foo} } should work fine and .foo {a: b} .bar {@extend .foo} @media screen { .bar {@extend .foo} } should throw an error saying it doesn’t know what .foo is in the context of screen.

If I explicitly place styles inside a context to extend I should be able to extend them, no? I shouldn’t have to change my whole naming scheme just to extend these.

I too can’t wait until this comes to browsers, but can we at least make it a somewhat useful feature in Sass? When used correctly it can save so much file size.

scottkellum on Jul 26, 2012