Как использовать двойной амперсант в SCSS для БЭМ?

Question

[mishapsv]

Я раньше использовал Less
и если мне нужно было применить для блока модификатор
<div class="block block--red"></div>
писал

.block {
border: 1px solid black;
color: black;
  &&--red {
    color: red;
}
}

и получал стили для .block.block--red

Прогуглил тему, но не нашел такое для scss.
Как вы с помощью сасс делаете модификаторы?

Comments

[mishapsv]

Artem Verbat спасибо. Такое видел, уступает по удобству варианту в less

[Nikolay Talanov]

А зачем вы вообще так пишите. В беме надо просто &-- писать.

[mishapsv]

Nikolay Talanov так получается лаконично и специфично. А можно посмотреть как вы делаете?

[Nikolay Talanov]

Как я и написал. А вообще у меня в профиле ссылка на кодпен, там куча демок.

[mishapsv]

Nikolay Talanov крутые демки!

Answer 1

[Егор Трегубенко]

1)block block--red в беме разве есть каскадность?
2)в сцсс достаточно одного &
3) если бы у вас был такой класс "block_block--red"

.block {
border: 1px solid black;
color: black;
&_block {
border:1px solid green;
&--red{
color:red; //Вот для требуемого блока стили

}
}
}

Comments

[mishapsv]

Егор Трегубенко это не каскадность, каскадность - ".block .block--red"
У меня ".block.block--red" повышает специфичность.