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

Question

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

<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

这会起作用，但是如果我们想使用 stylus 的嵌套功能，有什么方法可以避免丑陋的 ^[-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 层次结构

BEM hierarchy in stylus-lang and namespace

namespaces

stylus