标签: 循环

  • Stylus 实现 `content: “5”`

    Stylus 实现 `content: “5”`

    一般来说 Stylus 对属性是直接替换的,所以正常来说下面的 stylus

    $a = 10
    
    .foo::before
      content $a

    会编译成:

    .foo::before {
      content: 10;
    }

    这样是非法的,10 不会渲染出来。如果想让它渲染出来,必须用字符串。如果只有一个值,那就好办了,直接 $a = '10' 就好。但如果在循环里,就比较麻烦,此时,可以用 '' + 10 转换成字符串,或者使用 s(template, value),以下两种方式是等效的。

    // 注意运算顺序哦
    .foo
      for n in 1..5
        &:nth-child({n})::before
          $str = '' + (5 - n)
          content $str
    
      for n in 1..5
        &:nth-child({n})::after
          $str = 5 - n
          content s('"%s"', $str)