在Sass的样式开发过程中，很多开发者会尝试使用var()函数结合CSS自定义属性来定义变量，期望存储number类型的数值用于后续的计算操作，但实际运行时却发现这些变量被识别为string类型，导致数值运算无法正常执行。
问题复现场景
我们先来看一个典型的错误示例，开发者想要定义一个存储宽度的number类型变量，并用var()函数引用它进行计算：
// 定义CSS自定义属性
:root {
--base-width: 100;
}
// 尝试使用var()引用变量并计算
.container {
// 期望得到200px，实际可能报错或得到异常结果
width: calc(var(--base-width) * 2px);
}
上面的代码中，--base-width被赋值为100，看起来是number类型，但在Sass编译或者浏览器解析时，var(--base-width)返回的是字符串"100"，而不是数值100，因此calc计算时如果没有正确拼接单位就会出现问题。
问题产生的核心原因
CSS自定义属性的存储特性
CSS自定义属性（也就是我们常说的CSS变量）的值本质上都是字符串类型，无论你赋值时写的是数字、颜色还是其他内容，浏览器都会将其作为字符串存储。var()函数的作用仅仅是替换对应的字符串值，不会做任何类型转换。
Sass编译时的处理逻辑
Sass在编译SCSS代码时，会先处理自身的语法逻辑，再输出CSS。当Sass遇到var()函数时，会将其视为原生的CSS函数，不会对var()内部的自定义属性做Sass层面的类型解析，因此Sass也无法识别--base-width是number类型，只能将其当作字符串处理。
正确的解决方案
方案一：在自定义属性中直接包含单位
既然CSS自定义属性存储的是字符串，我们可以直接把单位写在自定义属性的值里，这样var()替换后得到的就是带单位的完整字符串，calc计算时可以直接使用：
:root {
// 直接把单位写在自定义属性值中
--base-width: 100px;
}
.container {
// 此时var(--base-width)替换后是"100px"，可以直接参与计算
width: calc(var(--base-width) * 2);
}
方案二：使用Sass变量做中间层
如果需要在Sass层面做数值计算，可以先把值存在Sass变量中，再把Sass变量赋值给CSS自定义属性，计算时优先使用Sass变量：
// 定义Sass的number类型变量
$base-width: 100;
:root {
// 把Sass变量的值赋给CSS自定义属性，注意拼接单位
--base-width: #{$base-width}px;
}
.container {
// 计算时使用Sass变量，保证类型正确
width: $base-width * 2px;
// 如果需要在CSS中使用自定义属性，用拼接后的版本
min-width: var(--base-width);
}
注意事项总结
- CSS自定义属性的值永远是字符串，var()函数只做字符串替换，不会转换类型
- 涉及数值计算的场景，优先在Sass变量层面完成计算，再赋值给CSS自定义属性
- 如果必须使用var()参与calc计算，要确保自定义属性的值包含完整的单位信息