必须用#{$var}插值包裹css变量值，否则sass会提前替换为硬编码值导致无法动态修改；插值仅支持属性值等字符串上下文，不支持属性名、选择器嵌套或@extend外的混入调用。
不能直接在 Sass @mixin 里用 $var 当作 CSS 变量名，必须用 #{$var} 插值包裹——否则编译器会把它当 Sass 变量解析，而 CSS 变量（--foo）是运行时生效的，两者生命周期完全不同。
为什么 --color: $primary 会报错
这是最常踩的坑：Sass 编译阶段就把 $primary 替换成具体值（比如 #3498db），结果生成的是 --color: #3498db，看似没问题。但一旦你想动态改这个变量（比如通过 JS 修改 style.setProperty('--color', 'red')），它就完全失效了——因为原始声明早已被硬编码替换掉了。
- 错误写法：
--color: $primary;→ 编译后丢失变量语义 - 正确写法：
--color: #{$primary};→ 编译后保留--color: #3498db字符串，仍可被 JS 或媒体查询覆盖 - 更关键的是：如果
$primary是 map、list 等复杂类型，不插值会直接报Invalid CSS
#{} 只能用于字符串上下文，不能用在属性名或选择器外
插值不是万能胶水。它只在 Sass 允许“拼接字符串”的位置有效，比如属性值、URL、选择器、伪类名。但以下场景会直接失败：
- 不能写
#{--color}: $val—— 属性名不支持插值（Sass 不允许动态生成属性名） - 不能写
.#{$class}-active:hover以外的选择器嵌套结构，比如#{.btn} .icon会报错 - 不能在
@include后面插值调用混入：@include my-#{$type}是非法语法 - 可以在
@extend中用：@extend %base-#{$state}，这是少数几个支持插值的指令之一
混入中定义 CSS 变量的推荐模式
真正实用的做法，是把 CSS 变量声明和混入职责分开：混入负责“设置变量”，而不是“定义变量”。这样既保持运行时灵活性，又避免插值滥用。
- 在
:root或组件根元素上统一声明：:root { --text-primary: #{$primary}; } - 混入里只做“应用”：
color: var(--text-primary);，不需要插值 - 若需批量生成变量，用
@each+ 插值组合：@each $key, $val in $theme-map { --#{$key}: #{$val}; } - 注意
$theme-map必须是 flat map，嵌套 map 无法直接插值键名
插值和 CSS 自定义属性的性能边界
很多人以为插值越多越灵活，其实不然。每次用 #{$var}，Sass 就要多做一次字符串拼接；如果变量来自深层嵌套 map 或函数返回值，还可能触发重复计算。
- 高频使用的变量（如颜色、间距）建议提前展开为顶层变量：
$space-sm: map-get($spacings, sm);，再插值 - 避免在循环中对同一变量反复插值：
@for $i from 1 through 3 { .item-#{$i} { --index: #{$i}; } }是 OK 的，但--value: #{get-value($i)}若get-value()较重，就会拖慢编译 - 最终生成的 CSS 文件体积会随插值数量线性增长——浏览器解析
var(--x)比解析硬编码值略慢，但差异微乎其微；真正的瓶颈在 Sass 编译阶段
插值不是语法糖，它是 Sass 编译期与 CSS 运行期间的一道窄门。跨过去容易，但门框高度固定——只允许字符串穿透，其余一律拦下。写混入时，先问自己：这个值是编译时确定的，还是运行时才知？答案决定该不该加 #{} 。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
