Mixin: rootModifier - adaptdk/fe_tools GitHub Wiki
rootModifier
A mixin for appending a string to the first selector. Useful if you're using BEM modifier on root level of your selector.
Params
/**
* A mixin for appending a string to the first selector. Useful if you're using BEM modifier on root level of your selector.
* @param {string} $stringToAppend - The string which will be added to the first selector in the selector.
*/
@params (
$stringToAppend
)
Examples
Example 1
Input (SCSS)
.lol {
.mort {
@include rootModifier('de') {
...styling
}
{
}
Output (CSS)
.lolde .mort {
...styling
}
Example 2
Input (SCSS)
.lol {
& &de {
&mort {
@include rootModifier('de') {
...styling
}
}
{
}
Output (CSS)
.lol .loldemort {
...styling
}
Example 3
Input (SCSS)
.block {
// The extra "&" is important, because we need the first selector to exist isolated.
& &__element {
.block {
&__element {
@include rootModifier('--myModifier') {
...styling
}
}
}
}
}
Output (CSS)
.block--myModifier .block__element .block__element {
...styling
}