如何在 Sass 中强制 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()表达式将在该上下文中工作是不合理的。

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

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

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

$ile: 10;

@for $i from 0 to $ile { }