Sass var() 函数读取数字变量被识别为字符串的原因分析
本文探讨Sass中使用var()函数访问变量时，数字变量被误识别为字符串的问题。
问题描述：如下Sass代码所示，$windowNum被定义为数字，但使用var()函数访问时，Sass将其视为字符串。
$windowNum: 100;
.my-class {
width: var(--windowNum)px; // 被识别为字符串
}
根本原因：Sass编译器在编译阶段处理变量。 $windowNum是在Sass编译之前定义的，属于Sass变量。而var(--windowNum)则是在CSS中访问自定义属性（Custom Properties，也称为CSS变量），它是在Sass编译之后，由浏览器或JavaScript在运行时注入的。 两者并非同一个变量。Sass无法在编译时预知运行时注入的CSS变量的值和类型。
因此，即使$windowNum是数字，var(--windowNum)对于Sass来说只是一个字符串，因为它只是在引用一个在编译时未知的CSS变量。 Sass无法进行类型推断，只能将其当作字符串处理。
解决方案：避免混淆Sass变量和CSS变量。 如果需要动态设置宽度，应在JavaScript中直接操作CSS变量--windowNum，而不是试图在Sass中使用var()函数访问它。 Sass应该专注于定义样式的结构和逻辑，而动态数据则应由JavaScript在运行时处理。
