css - Stylus 中的迭代

Question

我有 Stylus 文件，它看起来像:

div.c0
   background-color $background-color0
   color $color-0

div.c2
   background-color $background-color2
   color $color-2

div.c4
   background-color $background-color4
   color $color-4

div.c8
   background-color $background-color8
   color $color-8

div.c16
   background-color $background-color16
   color $color-16

我可以在此处使用 Stylus 迭代来简化我的 Stylus 文件吗？

Answer 1

虽然(还)没有变量插值，但您可以使用 lookup bif 来获取此类变量的值。所以，对于你的情况，代码是这样的:

for $i in 0..4
  $num = $i ? 1 : 0
  $num = $num * 2 for $j in 0..($i - 1)
  div.c{$num}
    background-color: lookup('$background-color' + $num)
    color: lookup('$color' + $num)