Question

我需要在SCSS中定义一组深层的选择器：

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

，但我的问题是规则将创建这个：

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

当我实际需要时：

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

我刚刚发现了这一点：

.Button {
  $self: &;

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

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

生成：

Answer 1

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

任何更好的选择？

我相信

&#{&} { }

可以做窍门

Answer 2