How do I force an integer into a CSS variable?
Forgive me if this is a simple question, but I'm struggling with this on CodePen and have no idea what's going on.
I have some code:
:root {
--ile: 10;
}
@for $i from 0 to (var(--ile)) { }
The problem is that the Codepen argument var (- ile) is not an integer (huh?), Even if it is explicitly (it does not have one, but because it is not 10.0, it cannot be a float). What am I missing? I tried to look in the CSS specs and various examples on the internet and use the number as a variable, so how do I force the conversion to an integer if 10 is not an integer?
source to share
The BOM allows custom property values to be used as numeric values.
But the context of your expression var()
doesn't appear as CSS at all. This is Sass. For obvious reasons, the specification does not cover non-standard syntax or preprocessors. It is unreasonable to assume that the expression var()
will work in this context.
In fact, custom properties only work in property declarations. They don't work anywhere. The spec describes this one here :
The var () function can be used in place of any part of the value in any property of an element. The var () function cannot be used as property names, selectors, or anything other than property values. (This usually results in invalid syntax, otherwise a value whose value is not associated with a variable.)
Since this is a Sass loop, I see no reason not to use Sass variables:
$ile: 10;
@for $i from 0 to $ile { }
source to share