更多 precedence/specificity 至 CSS class 更少

Question

我有一个 LESS 代码，例如：

.block__element {
  background: red;
  &--modifier {
    background: yellow;
  }
}

我希望 .block__element--modifier 更具体，例如：

.block__element.block__element--modifier {
  background: yellow:
}

以便它可以覆盖其他一些样式。我可以通过以下方式实现：

.block__element {
  background: red;
  &--modifier.block__element {
    background: yellow;
  }
}

我想知道有什么简单的方法吗？

Answer 1

您可以使用 变量插值 以更奇特的方式实现它，这样每次您需要增加 class/modifier 的特异性时都可以使用它。一开始看起来很奇怪，但是当你习惯了它之后你会爱上它并且你的代码看起来会更加简洁易读。

Check the official documentation

.block__element {
    @this: block__element;
    background: red;

    &.@{this}--modifier-primary {
        background: yellow;
    }

    &.@{this}--modifier-secondary {
        background: green;
    }

    &.@{this}--modifier-tertiary {
        background: green;
    }
}

Answer 2

.block__element {
    background: red;
    &&--modifier {
        background: yellow;
    }
}

link

更多 precedence/specificity 至 CSS class 更少

More precedence/specificity to CSS class in LESS

css

less

css-specificity