如何强制 CSS 变量为 Sass 中的整数？

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:

The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

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

$ile: 10;

@for $i from 0 to $ile { }

Answer 2

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

如果，您的 CSS 变量确实意味着作为 static 变量工作，并且您知道它永远不会改变，或者如果是这样，它就不会对于那个特定的问题 use-case，那么我建议这样做：

$ile: 10;

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

如何强制 CSS 变量为 Sass 中的整数？

How to force CSS Variable to be integer in Sass?

css

sass

css-variables