Question

考虑这个html（用BEM aproach编写）：

<div class="app app--light">
  <div class="longblockname longblockname--modifier">
    <div class="longblockname__element">
      ...
    </div>
  </div>
</div>

我试图为此找到方便和简短的手写笔样式表，并避免在任何地方重复longblockname。我会用简单的color: #111替换真实的样式，但在实际情况下会有很多代码：

我从：

开始

.longblockname
  &__element
    color #111

然后我希望块修饰符影响元素：

.longblockname
  &__element
    color #111
  &--modifier
    // How to refer to &__element here?
    // If I use &__element, it will compile to `.longblockname--modifier__element`
    // But I need `.longblockname--modifier .longblockname__element`

我看到了两种方法来实现这一目标：

不要使用换行符：

.longblockname
  &__element
    color #111
  &--modifier &__element
    color #222

这样可行，但如果我们想使用手写笔的嵌套功能，有没有办法避免像这样的丑陋^[-1]语法：

.longblockname
  &__element
    color #111
  &--modifier
    & ^[-1]
      &__element
        color #222

好吧，好吧，可能只是语法偏好，但对我来说，用&&之类的东西来引用嵌套的父级会更好。

然后，那是真正的问题。有没有办法在手写笔中声明css命名空间？整个应用程序使用app app--light样式的容器包装。我希望这种风格影响容器中的所有内容。我首先将所有内容放在.app-light中：

.app--light
  .longblockname
    &__element
      color #333
    &--modifier
      & ^[-1]__element
        color #444

但这不起作用，因为& ^[-1]__element编译成.app-light .longblockname--modifier .app--light .longblockname__element，而正确的语法应该是.app--light .longblockname--modifier .longblockname__element。我希望.app--light添加任何样式声明，但只是第一次。有没有办法做到这一点？

Answer 1

您可以使用Ranges in partial references来获取所需树中的选择器：

手写笔

.app--light
  & .longblockname
    &__element
      color #333
    &--modifier
      & ^[1..1]__element
        color #444

<强>输出

.app--light .longblockname__element {
  color: #333;
}
.app--light .longblockname--modifier .longblockname__element {
  color: #444;
}

stylus-lang和命名空间中的BEM层次结构

1 个答案: