如何在 Sass 中强制 CSS 变量为整数? [英] How to force CSS Variable to be integer in Sass?

问题描述

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

Forgive me if this is simple question, but I am fighting with this on CodePen and have no clue what's going on.

我有代码:

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

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

The problem is Codepen claims var(--ile) is not an integer (huh?) even if obviously it is (it has no unit and because it is not 10.0 it cannot be a float). What Am I missing? I tried to look in CSS specs and various examples on the web and using number as variable is legit so how to force conversion to integer if the 10 is not integer?

推荐答案

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

The spec allows using custom property values as numeric values.

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

But the context your var() expression appears isn't CSS at all. It's Sass. For obvious reasons, the spec doesn't cover non-standard syntax, or preprocessors. It's unreasonable to assume that a var() expression is going to work in that context.

实际上，自定义属性只在属性声明中起作用.他们在其他任何地方都不起作用.规范在此处声明:

In fact, custom properties only work in property declarations. They don't work anywhere else. The spec states this here:

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

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 变量:

Since this is a Sass loop, I don't see any reason not to use Sass variables:

$ile: 10;

@for $i from 0 to $ile { }

这篇关于如何在 Sass 中强制 CSS 变量为整数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！