Question

我的代码如下：

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

Answer 2

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

link

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

2 个答案: