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

【问题标题】：Is there a way to programatically build a CSS selector chain in stylus?有没有办法在手写笔中以编程方式构建 CSS 选择器链？
【发布时间】：2012-04-26 16:50:51
【问题描述】：

我想弄清楚，如何在“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 }

这可能吗？？

【问题讨论】：

标签： stylus

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：