stylus - 有没有办法在手写笔中以编程方式构建 CSS 选择器链？

Question

我试图弄清楚，如何在“for in”循环中构建 CSS 选择器。

类似的东西：

ul
    for row in 1 .. 4
        li*{row}                 <=== thats the tricky part 
            padding: 10px * row

它应该产生：

ul li{ padding: 10px }
ul li li{ padding: 20px }
ul li li li{ padding: 30px }
ul li li li li{ padding: 40px }

那可能吗？？

Answer 1

是的，有可能：

ul
  el = ''
  for row in 1..4
    el += ' li'
    {el}
      padding row * 10px

你可能想为此创建一个 mixin，我把它留给你作为练习！

编辑：输出：

ul li {
  padding: 10px;
}
ul li li {
  padding: 20px;
}
ul li li li {
  padding: 30px;
}
ul li li li li {
  padding: 40px;
}

Answer 2

为您执行此操作的混合/函数示例：

build_selector(selector, count)
  $out = selector

  for i in 1..count
    {$out}
        padding i * 10px
    $out += ' ' + selector


ul
    {build_selector(li, 4)}

产生：

ul li {
    padding: 10px;
}

ul li li {
    padding: 20px;
}