Stylus：为一个规则迭代多个选择器

Question

我想迭代具有不同编号的选择器以创建多个选择器，这些选择器以逗号分隔分配给一个规则。

我进行了搜索，但没有在文档中找到任何类似的示例。

我正在尝试使用以下代码：

for num in (1..6)
  .foo-{num}
    color #dfd

但也有多个规则。

我想实现的是：

.foo-1,
.foo-2,
.foo-3,
.foo-4,
.foo-5,
.foo-6 {
  color: #dfd;
}

Answer 1

join(range)
  str = ''
  for n in range
    str += ',.foo-' + n

{join(1..5)}
  color: #dfd

http://stylus-lang.com/docs/iteration.html#functions

编辑：评论中提到的问题的解决方案

multisize(sizes, before, after)
  str = ''
  for size in sizes
    str += before + size + after + ','

{multisize(xs sm lg, 'cs.btn-', '.btn-blue:hover')}
  color: #dfd

Answer 2

如果您使用 @extend，您会得到用逗号分隔的选择器，您可以为规则使用占位符选择器：

手写笔

$rules
  color #dfd

for num in (1..6)
  .foo-{num}
    @extend $rules

输出

.foo-1,
.foo-2,
.foo-3,
.foo-4,
.foo-5,
.foo-6 {
  color: #dfd;
}

Answer 3

也可以使用+cache(key)来实现，其中key是一个唯一的字符串

for num in (1..6)
  .foo-{num}
    +cache('foo')
      color #f00

.foo-1,
.foo-2,
.foo-3,
.foo-4,
.foo-5,
.foo-6 {
  color: #f00;
}

Stylus：为一个规则迭代多个选择器

Stylus: Iterate multiple selectors for one rule

css

preprocessor

stylus