I am creating a site map layout.
Looking for a solution similar to this:
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 code in Stylus is not producing the desired output:
ul.site-map
li
for $level in (1..3)
&[data-level="{$level}"]
margin-left ($level * 50)px
Any suggestions on how to resolve this issue?
Access the codepen link.