namespaces - 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

这会起作用，但是如果我们想使用手写笔的嵌套功能，有什么办法可以避免丑陋的 ^[-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;
}