css - 手写笔选择器内部的过滤

Question

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

在CSS中，它会是这样的:

.list {
  color: red;
}

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

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

Stylus 有没有办法在不使用 .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)?

Answer 1

Stylus 使用 & 来引用上一个嵌套级别中的选择器(“父选择器”)，类似于 Sass/SCSS和 LESS 。这显示在 Selectors 中手写笔的引用。

我以前没有使用过 Stylus，但看看以下方法是否适合您:

.list
  color red

  &.foo
    font-size 150%

  &.bar
    font-size 75%