CODEWITHSUNDEEP
cssnpmsassnode-sass
bashkovpd
bashkovpd

Reputation: 598

& 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.

Upvotes: 0

Views: 94

Answers (1)

Christian Hain
Christian Hain

Reputation: 639

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

Upvotes: 1

Related Questions