How to force integer in CSS Variable?

Question

Forgive me if this is simple question, but I am fighting with this on CodePen and have no clue what's going on.

I have in code:

:root {
  --ile: 10;
}
@for $i from 0 to (var(--ile)) { }

The problem is Codepen claims var(--ile) is not an integer (huh?) even if obviously it is (it has no unit and because it is not 10.0 it cannot be a float). What Am I missing? I tried to look in CSS specs and various examples on the web and using number as variable is legit so how to force conversion to integer if the 10 is not integer?

Answer 1

The spec allows using custom property values as numeric values.

But the context your var() expression appears isn't CSS at all. It's Sass. For obvious reasons, the spec doesn't cover non-standard syntax, or preprocessors. It's unreasonable to assume that a var() expression is going to work in that context.

In fact, custom properties only work in property declarations. They don't work anywhere else. The spec states this here:

The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

Since this is a Sass loop, I don't see any reason not to use Sass variables:

$ile: 10;

@for $i from 0 to $ile { }