有没有办法以编程方式在手写笔中构建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

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

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