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