Question

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

我有代码：

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

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

Answer 1

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

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

实际上，自定义属性仅适用于属性声明。他们在其他任何地方都无法工作规范说明了here：

可以使用var（）函数代替元素上任何属性中值的任何部分。 var（）函数不能用作属性名称，选择器或属性值之外的任何其他内容。（这样做通常会产生无效的语法，或者其含义与变量无关的值。）

由于这是一个Sass循环，我认为没有任何理由不使用Sass变量：

$ile: 10;

@for $i from 0 to $ile { }

Answer 2

我希望有一种将CSS变量转换为整数的方法，但遗憾的是没有。但是，即使存在，由于SASS开发人员实施的编译决定，这可能也不起作用。

如果您的CSS变量确实打算作为 static 变量使用，并且您知道它永远不会改变，或者如果这样，则对特定的用例无关紧要，那么我建议这样做：

$ile: 10;

:root {
  --ile: #{ile};
}
@for $i from 0 to $ile { }