选择器属性中的手写笔迭代

Question

我正在制作站点地图。

因此需要这样的东西：

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

此手写笔代码无效：

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

我该如何解决这个问题？

Link 到 codepen

Answer 1

您可以转义引号：

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

选择器属性中的手写笔迭代

Stylus iteration in selector's attribute

css

stylus