手写笔迭代选择器的属性(Stylus iteration in selector's attribute)

手写笔迭代选择器的属性(Stylus iteration in selector's attribute)

我正在制作一个网站地图。

需要这样的结果：

ul.site-map li[data-level="1"] { margin-left: 50px; } ul.site-map li[data-level="2"] { margin-left: 100px; } ul.site-map li[data-level="3"] { margin-left: 150px; }

这个Stylus代码不起作用：

ul.site-map li for $level in (1..3) &[data-level="{$level}"] margin-left ($level * 50)px

我该如何解决这个问题？

链接到codepen

I am making a site map.

Need something like this as a result:

ul.site-map li[data-level="1"] { margin-left: 50px; } ul.site-map li[data-level="2"] { margin-left: 100px; } ul.site-map li[data-level="3"] { margin-left: 150px; }

This Stylus code doesn't work:

ul.site-map li for $level in (1..3) &[data-level="{$level}"] margin-left ($level * 50)px

How can I sort this out?

Link to codepen

最满意答案

你可以逃避引号：

&[data-level=\"{$level}\"]

You can escape the quote marks:

&[data-level=\"{$level}\"]