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;
}

手写笔：为一个规则迭代多个选择器

3 个答案: