Stylus 通过循环创建混合

Question

我的目标是通过数组创建一组混入。我的想法是应用代码如下：

f_colors = (f1 f2 f3 f4 f5)
for $i in 0..length(f_colors)
    v = f_colors[$i]
    num = $i+1

   f{num}cl()
      color v

   f{num}bg()
      background-color: v

// and use to generate css
body
   h1
       color: white
       f5bg ''

我在 f_colors 中存储了一个颜色列表。在这个例子中，我会得到一个输出

body h1 {
   background-color: #00f; // f5 color
   color: white;
}

是否可能，或者我最好的方法是使用 mixin，如下所示：

fbg(num)
    background-color: f_colors[num-1]

fcl(num)
    color: f_colors[num-1]

感谢阅读。

Answer 1

您必须求助于 define BIF：

$colors = (f1 f2 f3 f4 f5)
for $c, $i in $colors
  define("f"+($i + 1)+"bg", @() {
    background-color: $c
  })

// and use to generate css
body
  h1
    color: white
    f5bg ''

Stylus 通过循环创建混合

Stylus create mixins via loop

css

loops

mixins

stylus