.block-class {
@include some-mixin();
some-rule: value;
another-rule: value;
&:hover {
// ...
}
@media ... {
// ...
}
&_modifier {
// ...
}
&__element {
// ...
}
&__another-element {
// ...
}
}.block:hover (или .block_modifier) нужно изменить вложенный .block__element, то получается, что это правило задано раньше самого .block__element. Stylelint при стандартных настройках ругается на "no-descending-specificity", да и запутаться можно.:hover и &_modifier в конец, то "no-descending-specificity" починится, но становится тупо неудобно — нужно пролистать весь файл, чтобы понять, есть ли вообще состояния у элемента.
.block {
$this: &;
color: red;
&__element { font-size: 12px; }
&:hover &__element { transform: scale(1.1); }
@media () {}
//==
//== Модификация какая-то
//== ==========================
#{$this}_mod {
color: green;
&__element { font-size: 16px; }
@media () {}
}
#{$this}__mod:hover &__element { transform: scale(1.1); }
//==
//== Другая модификация
//== ==========================
&_mod { background: yellow; }
@media () {}
}.header {
background: #fff;
&::after {
content: "";
background: #000;
}
&:hover{
background: #000;
&::after{
background: #fff;
}
.header__box{
background: #fff;
}
}
&__box{
background: red;
}
}
Простой
Средний