Блог

Я использую BEM (по крайней мере, его модифицированную версию) уже довольно давно; и недавно переключился с написания CSS на Sass, похоже, он довольно хорошо подходит для BEM, но я не могу понять, как легко использовать спецификацию подстановочных знаков.

Например; допустим, у меня есть несколько кнопок:

 <button
  class="BLOCK__ELEMENT BLOCK__ELEMENT--MODIFIER1"
>
  Click Me 1
</button>

<button
  class="BLOCK__ELEMENT BLOCK__ELEMENT--MODIFIER2"
>
  Click Me 2
</button>

<button
  class="BLOCK__ELEMENT BLOCK__ELEMENT--MODIFIER3"
>
  Click Me 3
</button>
 

В файле CSS я мог бы написать следующее:

 .BLOCK__ELEMENT {
  border-radius: 2rem
}

.BLOCK_ELEMENT--MODIFIER1 {
  background-color: red
}

.BLOCK_ELEMENT--MODIFIER2 {
  background-color: white
}

.BLOCK_ELEMENT--MODIFIER3 {
  background-color: blue
}
 

и все было бы хорошо в мире

в Sass я мог бы упростить это следующим образом:

 .BLOCK__ELEMENT {
  border-radius: 2rem

  amp;--MODIFIER1 {
    background-color: red
  }

  amp;--MODIFIER2 {
    background-color: white
  }

  amp;--MODIFIER3 {
    background-color: blue
  }
}
 

Что является хорошим улучшением

Но то, что я действительно хотел бы сделать, это упростить мою разметку следующим образом

 <button
  class="BLOCK__ELEMENT--MODIFIER1"
>
  Click Me 1
</button>

<button
  class="BLOCK__ELEMENT--MODIFIER2"
>
  Click Me 2
</button>

<button
  class="BLOCK__ELEMENT--MODIFIER3"
>
  Click Me 3
</button>
 

и иметь Sass, который выглядит примерно так:

 .BLOCK__ELEMENT {

  amp;* {
    border-radius: 2rem
  }

  amp;--MODIFIER1 {
    background-color: red
  }

  amp;--MODIFIER2 {
    background-color: white
  }

  amp;--MODIFIER3 {
    background-color: blue
  }
}
 

Существует ли какая-либо такая реализация подстановочных знаков в sass?

У меня есть другое возможное решение

 @use "sass:string"

@mixin self() {
  $self: string.slice(#{amp;}, 2);
  
  @at-root amp;, [class*="#{$self}"] {
    @content
  }
}
 

 .Block {
  @include self() {
    border-radius: 2rem;
  }

  amp;--modifier1 {
    background-color: red;
  }
  amp;--modifier2 {
    background-color: blue;
  }
  amp;--modifier1 {
    background-color: salmon;
  }

  amp;__element {
    @include self() {
      width: 50px;
    }

    amp;--modifier {
      background-color: skyblue;
    }

  }
}
 

И это компилируется таким образом

 .Block, [class*=Block] {
  border-radius: 2rem;
}

.Block--modifier1 {
  background-color: red;
}
.Block--modifier2 {
  background-color: blue;
}
.Block--modifier1 {
  background-color: salmon;
}

.Block__element, [class*=Block__element] {
  width: 50px;
}

.Block__element--modifier {
  background-color: skyblue;
}
 

как насчет старого доброго css? 🙂

 [class*="BLOCK__ELEMENT-"]
 

Как, скажем, Sueno, вы можете использовать [class*=»BLOCK__ELEMENT—«] и сделать это:

 .BLOCK_ELEMENT {

  @at-root amp;, [class*="BLOCK_ELEMENT"] { // or just @at-root [class*="BLOCK_ELEMENT"]
    border-radius: 2rem;
  }

  amp;--MODIFIER1 {
    background-color: red
  }

  amp;--MODIFIER2 {
    background-color: white
  }

  amp;--MODIFIER3 {
    background-color: blue
  }  
}