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