Set CSS padding value for attribute based value

Question

This does not work:

li[depth="3"] { padding-left: calc(40px * attr(depth integer)); }

However, this works:

li[depth="3"] { padding-left: calc(40px * 3); }

---

Apparently attr(name type)not supported internally calc()... yet.

• More info here: At attr () and calc ()

Is there a way to replace the following CSS CSS that works for all integer attribute values depth?

li[depth="2"] { padding-left:  40px; }
li[depth="3"] { padding-left:  80px; }
li[depth="4"] { padding-left: 120px; }

Answer 1

There is no special CSS that can achieve this - as a rule, it is better to avoid references to style / layout rules in the DOM. A CSS flexbox model may be useful for this purpose, to allow the size of elements depending on how many of them exist.

CSS, , Sass, ( SCSS) - , .css . , - 20 , ( , 20, , ).

@for $i from 1 to 20 {
  li[depth="#{$i}"] { padding-left: #{($i - 1) * 40px}; }
}