Abstract

Using a placeholder selector, calling a mixin which wraps a media-query, the placeholder selector is leaked into the CSS output.

Detail

Given the following SCSS:

%foo {
    @media screen and (min-width: 300px) {
        max-width: 80%;
    }
}

body {
    @extend %foo;
}

Expected

The output of sass (3.3.1 and 3.2.15)

@media screen and (min-width: 300px) {
  body {
    max-width: 80%; } }

Actual

The output of libsass (actually, node-sass 0.8.3 which is based off of 1122ead)

@media screen and (min-width: 300px) {
  %foo {
    max-width: 80%; } }

As you can see the placeholder %foo should be body but it is not. This is also the same case with multiple selectors extending off of %foo, it still displays %foo instead of the multiple classes that were extended.

I'm quite sure this is only media-query based, I have a reduced test-case with mixins:

@mixin test() {
    @content;
}
%foo {
    @include test() {
        max-width: 80%;
    }
}
body {
    @extend %foo;
}

The output of this is identical in SASS (3.3.1 and 3.2.15) and 1122ead:

body {
  max-width: 80%; }

Further more, multiple mixins also work the same - for example:

@mixin test2() {
    @content
}
@mixin test() {
    @include test2() {
        max-width: 80%;
    }
}
%foo {
    @include test();
}
body {
    @extend %foo;
}

Produces the same output.