css - 如何在 Sass 中强制 CSS 变量为整数？

Question

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

我有代码：

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

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

score 2 · Accepted Answer

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

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

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

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

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

$ile: 10;

@for $i from 0 to $ile { }

score 0 · Accepted Answer

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

如果您的 CSS 变量确实是作为静态变量工作的，并且您知道它永远不会改变，或者如果是这样，那么对于那个特定的用例并不重要，那么我建议这样做：

$ile: 10;

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

2 回答 2