Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/sass/libsass/issues/316 below:

Extending placeholders which have nested media queries leaks placeholder into CSS output · Issue #316 · sass/libsass · GitHub

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

Given the following SCSS:

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

body {
    @extend %foo;
}

The output of sass (3.3.1 and 3.2.15)

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

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:

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4