Kindzoku Kindzoku - 3 months ago 17
Sass (Sass) Question

Sass add parent selector after current ( selector& )

I have BEM structure like this (but the question not about BEM):

.form-element { //.form-element
...
&__control { //.form-element__control
...
}
//now I want to have specific rule: textarea.form-element__control
textarea& { // < here is an error

}
//it works like this:
textarea & {

}
}


I think, i'm missing something tiny, like a bracers, or something similar, if it's doable at all.

The question in the code comments :)

Answer

If you follow my example this will achieve what you are after.

Use the interpolation method #{ } and combine it with the @at-root function

@at-root textarea#{&} { display: none; }

My example here

.contact-block { @at-root textarea#{&} { display: none; } }

Compiles to

textarea.contact-block { display: none; }

So this is what yours would look like

.form-element { &__control { @at-root textarea#{&} { display: none; } } }

Compiling to

textarea.form-element__control { display: none; }