Search code examples
cssnpmsassnode-sass

& in SCSS extends issue

In my scss code I'm trying to make placeholder like:

%input__label {
    color: red;
    &_content {
        color: blue;
    }
}

And then extend it:

.input__label {
    @extend %input__label;
}

When I'm trying to compile that code only input__label compiles, but input__label_content doesn't:

.input__label {
   color: red;
}

(But for example with pseudo elements - &::after everything works fine) Why is this hapenning? I'm using node v7.10.1 and node-sass v4.5.3.

Solution

  • Use a mixin instead of an extend:

    @mixin input__label {
    color: red;

    &_content {
        color: blue;
    }
}

.input__label {
    @include input__label;
}

    The functionality to do it via extends is purposefully disallowed: https://github.com/sass/sass/commit/face3172930b515ac2040e450d4db3ffe01c31b5