Combine Calc() With Attr() In CSS
Answer : Right now attr() is not supported by default in any major browser for any attributes other then "content". Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/attr There appears to be a way around it using var s .content{ --x: 1; width: calc(100px * var(--x)); background: #f00; } [data-x="1"] { --x: 1; } [data-x="2"] { --x: 2; } [data-x="3"] { --x: 3; } /*doesn't look like this works unfortunately [data-x] { --x: attr(data-x); } seems to set all the widths to some really large number*/ The commented out section would have been perfect, and this may be the very same reason your idea didn't work, but it seems css doesn't perform the nice automatic casting that you might be used to in javascript ( '2' * 3 //=6 ). attr() returns a string, not a number, and this can be seen by adding .content:after { content:var(--x) } ; nothing gets printed, --x is a number, content accepts s...