CODEWITHSUNDEEP
cssstylus
dimaninc
dimaninc

Reputation: 850

Stylus iteration in selector's attribute

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

Upvotes: 2

Views: 1932

Answers (1)

Panya
Panya

Reputation: 2699

You can escape the quote marks:

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

Upvotes: 8

Related Questions