Блог

У меня есть этот HTML-элемент:

<button class="Button Button--is-primary Button--is-disabled Button--is-dark-theme">

И мне нужно определить в Scss набор глубоких селекторов, подобных этому:

 .Button {
  // Apply this for all Buttons that are dark theme
  amp;--is-dark-theme {
    // Apply this for all Buttons that are Dark AND are Primary
    amp;--is-primary {
      //...
    }
  }
}
 

Но моя проблема в том, что правило создаст это:

.Button--is-dark-theme--is-primary

Когда мне действительно нужно:

.Button--is-dark-theme.Button--is-primary

Я только что нашел это:

 .Button {
  $self: amp;;

  // Apply this for all Buttons that are dark theme
  amp;--is-dark-theme {

    // Apply this for all Buttons that are Dark AND are Primary
    amp;#{$self}--is-primary {
      color: red;
    }
  }
}
 

Что порождает:

 .Button--is-dark-theme.Button--is-primary {
  color: red;
}
 

Есть лучший вариант?