Sass 中 var() 函数与数字类型：字符串解析问题
在 Sass 中，使用 var() 函数定义的数值变量会被识别为字符串，而不是数字。这篇文章将解释其原因及解决方法。
问题描述
如示例代码所示，即使 windowNum 变量被赋值为数字，Sass 编译器仍将其解释为字符串。
原因分析
Sass 是一种预处理器，其编译过程发生在运行时之前。这意味着 Sass 无法访问 JavaScript 运行时环境中的变量。为了保证预编译的完整性，Sass 将 var() 函数中的所有值，包括数字，都解析为字符串。
解决方法
要将 var() 函数中的字符串数值转换为数字，需要在 Sass 代码中进行类型转换。 可以使用 Sass 内置的 unit() 函数或 to-number() 函数（如果你的 Sass 版本支持）进行转换。 例如：
$windowNum: var(--window-num); // 假设 --window-num 的值为 "10" // 使用 unit() 函数进行转换 (适用于所有 Sass 版本) $windowNum-num: unit($windowNum, px); // 将 "10" 转换为 10px，然后去除单位得到数字10 // 使用 to-number() 函数进行转换 (如果你的 Sass 版本支持) $windowNum-num: to-number($windowNum); // 将 "10" 直接转换为 10 // 使用转换后的数字变量 width: $windowNum-num * 10px;
通过以上方法，可以确保在 Sass 中正确地使用 var() 函数传递的数值变量。 选择哪种方法取决于你的 Sass 版本和项目需求。 记住，unit() 方法需要一个单位参数，即使你只需要数字本身。 to-number() 方法更简洁，但兼容性较低。
