scss变量无法直接用于css自定义属性声明，必须用#{$var}插值；var()中不能直接使用scss变量作默认值，需转为css变量再嵌套调用；@each批量生成时注意嵌套处理；sass无法读取var()运行时值，计算须交由css calc()。
SCSS变量不能直接写进--xxx声明里
编译时就丢弃，浏览器DevTools里根本看不到那条CSS。因为$primary是Sass编译期变量，而--primary是运行时CSS机制，二者不互通。写成--color: $primary;会被Sass当成非法值跳过整行。
必须用#{$primary}显式插值，让Sass把值展开为字符串拼进去：
:root {
--primary: #{$primary};
--space-sm: #{$spacing-sm};
}
-
#{}是唯一能“注入”SCSS变量到CSS原生语法的方式 - 插值内支持计算：
--line-height: #{1.5 * 1};（注意：这是Sass计算，不是CSScalc()） - 别多加空格：
# { $primary }会失效，必须是#{$primary}
想在var()里用SCSS变量当默认值？不行
写color: var(--text, $fallback);看似合理，但Sass不会替换成#3498db，而是原样输出——结果变成color: var(--text, $fallback);，浏览器报错或忽略整个声明。
真正可用的写法是把 fallback 也做成 CSS 变量：
:root {
--fallback-text: #{$fallback};
}
.text {
color: var(--text, var(--fallback-text));
}
-
var(--text, $fallback)→ 编译失败或无效CSS -
var(--text, var(--fallback-text))→ 正确，两级回退都走运行时 - 如果
--fallback-text本身也依赖SCSS变量，记得同样用#{$fallback}插值定义
用@each批量生成--xxx要防嵌套漏写
映射变量批量转CSS变量很常用，但容易漏掉深层嵌套键或拼错--#{$key}格式：
$colors: (
"primary": #007bff,
"success": #28a745
);
:root {
@each $name, $value in $colors {
--#{$name}: #{$value};
}
}
- 键名带短横线（如
"gray-500"）没问题，--#{$name}会正确生成--gray-500 - 若映射嵌套，比如
$theme: ("light": ($bg: #fff, $text: #000))，需递归mixin或扁平化处理，否则@each只遍历第一层 - 生成的变量名必须以
--开头，否则浏览器不识别为自定义属性
SCSS里没法读var(--base-font-size)做计算
试图在Sass函数里写$base: var(--base-font-size);然后算pxToRem(16)，结果是16/var(--base-font-size)rem——非法CSS，浏览器无法解析。
原因很简单：Sass编译时DOM还没加载，var()根本没值。所有计算必须交给CSS运行时：
.btn {
font-size: calc(16px / var(--base-font-size) * 1rem);
}
-
--base-font-size必须带单位（如16px），否则calc()除法非法 - 不要在SCSS里封装
pxToRem()函数去读CSS变量——那是方向性错误 - 如果需要JS动态改
--base-font-size，确保所有用到它的样式都基于var()，而不是#{$size}插值出来的静态值
插值语法看着简单，但#{$var}和var(--var)混用时，边界最容易模糊——前者是编译期字符串替换，后者是运行时值查找，一旦搞混，调试时看到的“没生效”，其实是压根没生成或生成了非法CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
