如何在CSS变量中强制整数？

Question

请原谅我，如果这是一个简单的问题，但我在CodePen上与此战斗，并不知道发生了什么。

我在代码：

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

问题是Codepen声称VAR（ - ILE）不是一个整数（啊？）即使显然是（它没有单元因为它是不10.0它不能是一个浮点数）。 我错过了什么？我试图查看CSS规格和网上的各种示例，并使用数字作为变量是合法的，所以如果强制转换为整数，如果10不是整数？

Answer 1

该规范允许使用自定义属性值作为数值。

但您的var()表达式出现的上下文根本不是CSS。这是萨斯。出于显而易见的原因，该规范不包括非标准语法或预处理器。假设var()表达式在这种情况下将起作用是不合理的。

实际上，自定义属性只在属性声明中起作用。他们不在其他地方工作。规范说明了这一点：here：

var（）函数可以用来代替元素上任何属性值的任何部分。 var（）函数不能用作属性名称，选择器或除属性值外的其他任何内容。 （这样做通常会产生无效的语法，否则其含义有变无连接的值。）

因为这是一个循环的Sass，我看不出有任何理由不使用萨斯变量：

$ile: 10; 

@for $i from 0 to $ile { }