scss函数无法运算css变量var(--x)，因其编译期仅为字符串占位符，无数值与单位信息；必须用calc()在运行时计算，并配合纯数字或带单位的css变量定义及scss兜底策略。
SCSS函数无法对var(--x)做任何运算——它在编译期只是字符串占位符，不是数值，更不带单位信息。所有“在SCSS里算CSS变量”的想法都得转向运行时方案。
为什么var(--size)不能放进SCSS函数里计算
SCSS编译器看到var(--size)就原样输出，不解析、不推导、不校验。你写width: $base * 2能出40px，但写width: var(--size) * 2会直接报错或生成无效CSS，因为*左边是字符串，右边是数字，语法非法。
-
var(--size)在SCSS中类型是string，type-of(var(--size))返回"string"，不是"number" - 即使变量值是
"16"（无单位），SCSS也不会自动转成数字；16 + "16"结果是字符串拼接"1616"，不是32 - 试图用
str-to-num()之类自定义函数转换？不行——SCSS没有安全的字符串转数字内置函数，且var(--size)根本不会被函数参数捕获，它被当作普通文本跳过
真正能用的三种组合方式
想让CSS变量参与缩放、加减、单位转换，必须明确分工：SCSS管结构和兜底，CSS管运行时计算。
- 纯数字存CSS变量 +
calc()补单位：
定义--size: 16;（不带px），使用font-size: calc(var(--size) * 1px);或margin: calc(var(--size) * 1.5 * 1px); - 带单位存CSS变量 +
calc()直接运算：
定义--size: 16px;，使用width: calc(var(--size) * 2);（支持单位与数字乘除） - SCSS变量做fallback + 嵌套
var()降级：color: var(--text-color, var(--theme-color, #{$fallback}));，其中$fallback是SCSS变量，仅作编译时兜底
用SCSS mixin封装calc()表达式时的关键细节
写mixin简化calc(var(--x) * N)这类重复逻辑时，别试图把var()当参数传进去——它只能是字符串字面量。
- 正确写法：接收纯数字参数，输出合法
calc()字符串@mixin scale-size($multiplier) { font-size: calc(var(--size) * #{$multiplier}); } - 错误写法：
@mixin scale-var($var-name, $multiplier) { font-size: calc(#{$var-name} * #{$multiplier}); }——$var-name若为"--size"，结果是calc(--size * 2)，语法错误 - 单位陷阱要手动防：如果CSS变量存的是
--gap: 8;，而你想加4px，必须写calc(var(--gap) * 1px + 4px)，不能写calc(var(--gap) + 4px)（8 + 4px非法）
从JS注入变量时如何避免SCSS层崩溃
当--size由JavaScript动态设置（比如响应字体缩放），SCSS完全不可知其值，更不能假设它带单位或不带单位。
- JS侧统一存数字：
el.style.setProperty('--size', `${fontSizePx}`);，确保CSS层始终可用calc(var(--size) * 1px) - SCSS里不要用
map-get()或function去“读取”这个变量——它不存在于编译期上下文 - 若需在SCSS中生成对应类名（如
.size-16），只能靠构建时配置或预设枚举，不能实时映射var()值
最易被忽略的一点：var()的值是否生效，和SCSS毫无关系；它只取决于运行时DOM中是否存在该变量声明、是否拼写正确、作用域是否覆盖到目标元素。调试时别在SCSS文件里打log，直接开DevTools看Computed面板里的custom properties栏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
