css - LESS 中 CSS 类的更多优先级/特异性

Question

我有一个 LESS 代码，例如:

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

我想要更具体的.block__element——修饰符，例如:

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

这样它就可以覆盖一些其他样式。我可以通过以下方式实现它:

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

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

Answer 1

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

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;
    }
}