LESS 中 CSS 类的更多优先级/特异性答案

【问题标题】：More precedence/specificity to CSS class in LESSLESS 中 CSS 类的更多优先级/特异性
【发布时间】：2016-04-26 12:25:31
【问题描述】：

我有一个 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;
  }
}

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

【问题讨论】：

你目前的方法有什么问题？
Like this 可能，虽然老实说我不太明白这个问题（仅仅是打字字符经济吗？但为什么要两个班？不应该只是.block__element--modifier {background: yellow} 就足够了吗？听起来像是在破坏BEM 的目的）。
@Laurens 当前的方法有效。我目前正在使用它。我只是想知道。
@seven-phases-max 这是很好的方法。所以'&'符号只会替换我认为的父级，无论位置如何！我只是想知道我怎样才能做到这一点。
是的。文档仓库中甚至还有一个专用的issue。以及文档中对应的section。

标签： css less css-specificity

【解决方案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;
    }
}

【讨论】：

谢谢。但我认为 7-phases-max 的解决方案更干净

【解决方案2】：

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

link

【讨论】：