Sass 中 var() 函数与数字类型：字符串解析问题

在 Sass 中，使用 var() 函数定义的数值变量会被识别为字符串，而不是数字。这篇文章将解释其原因及解决方法。

问题描述

如示例代码所示，即使 windowNum 变量被赋值为数字，Sass 编译器仍将其解释为字符串。

原因分析

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

Sass 是一种预处理器，其编译过程发生在运行时之前。这意味着 Sass 无法访问 JavaScript 运行时环境中的变量。为了保证预编译的完整性，Sass 将 var() 函数中的所有值，包括数字，都解析为字符串。

解决方法

要将 var() 函数中的字符串数值转换为数字，需要在 Sass 代码中进行类型转换。 可以使用 Sass 内置的 unit() 函数或 to-number() 函数（如果你的 Sass 版本支持）进行转换。 例如：

<code class="scss">$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;</code>

通过以上方法，可以确保在 Sass 中正确地使用 var() 函数传递的数值变量。 选择哪种方法取决于你的 Sass 版本和项目需求。 记住，unit() 方法需要一个单位参数，即使你只需要数字本身。 to-number() 方法更简洁，但兼容性较低。