在手写笔选择器内过滤

Question

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

在CSS中,它将遵循:

.list {
  color: red;
}

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

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

在没有使用.list三次的情况下,Stylus有没有办法获得这个？我知道这有效:

.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.这在Stylus 的选择器参考中显示.

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

.list
  color red

  &.foo
    font-size 150%

  &.bar
    font-size 75%