css - 在触控笔选择器内过滤

Question

我有几个.list元素都需要红色。在这些.list元素中，具有类的元素.foo需要更大的字体，而.bar需要更小的字体。

在 CSS 中，它将遵循以下原则：

.list {
  color: red;
}

.list.foo {
  font-size: 150%;
}

.list.bar {
  font-size: 75%;
}

手写笔有没有办法在不使用.list三次的情况下获得这个？我知道这有效：

.list
  color red

.list.foo
  font-size 150%

.list.bar
  font-size 75%

我想要类似下面的东西，以便更清楚地说明一切都属于.list元素，并为特定属性添加了某些约束（ .foo, ）。.bar但是，以下内容改为选择后代：

.list
  color red

  .foo
    font-size 150%

  .bar
    font-size 75%

Stylus 中是否有允许这种结构的语法，即过滤内部的元素 .list，并将某些属性应用于每个“分支”（.list.foo，.list.bar）？

score 5 · Accepted Answer

Stylus 使用&引用上一个嵌套级别中的选择器（“父选择器”），类似于Sass/SCSS和LESS。这在Stylus的选择器参考中显示。

我以前没有使用过 Stylus，但看看以下是否适合你：

.list
  color red

  &.foo
    font-size 150%

  &.bar
    font-size 75%

1 回答 1