如何在 Sass 中强制 CSS 变量为整数？答案

【问题标题】：How to force CSS Variable to be integer in Sass?如何在 Sass 中强制 CSS 变量为整数？
【发布时间】：2017-11-15 09:51:36
【问题描述】：

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

我有代码：

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

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

【问题讨论】：

SCSS 不可能计算 CSS 变量，因为它没有浏览器环境来解释表达式 LIVE。理论上它可以解析simple变量，如果SCSS作者选择支持它，但是作为解析器是错误的。有意义，因为 CSS 变量被认为是 dynamic，而 SCSS 是 static。

【解决方案1】：

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

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

$ile: 10;

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

【讨论】：

【解决方案2】：

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

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

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

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

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

$ile: 10;

@for $i from 0 to $ile { }

【讨论】：

你是对的。我应该更具体地说明我想要实现的目标，并且我正在寻找某种将值从 Javascript 传递到 CSS 的方法，虽然 CSS 变量是可能的，但我不确定如何使用 SASS。
这没有回答问题的标题。我从谷歌来到这里，对缺乏答案感到失望。 XY 答案正在淹没 stackoverflow
@vsync：当然可以。你不能接受自定义属性在 Sass 语句中不起作用的事实。如果他们这样做了，我就不必提供 XY 答案了。
真正的问题不是关于 SASS，而是关于强制为整数。 SASS 部分只是 OP 的具体情况。我也非常需要这个。无论如何，很快新的 Houdini 将允许令人敬畏的新操作
@vsync：这是一个 Sass 问题。我会确保标题反映实际问题，以免将来的搜索者头疼。如果您有关于原生 CSS 的问题，请单独提出。如果你愿意，你甚至可以收回这个原始标题。