SCSS变量插值是编译期字符串拼接而非运行时动态行为，必须用#{}语法实现选择器或属性名插值，否则变量名被当作字面量输出，且不校验CSS合法性，需注意作用域、空格和命名规范。
SCSS变量插值不是“动态运行时”的，而是编译期字符串拼接——它之所以能生成选择器名，是因为编译器根本不管语义，只做字面替换。
选择器中嵌入变量必须用 #{} ，否则变量名直接被当作文本
写 .icon-#{$type} 时，如果 $type: "warning"，编译结果就是 .icon-warning；但若漏掉 #{} ，写成 .icon-$type，输出就是字面量 .icon-$type，浏览器完全不认识这个选择器。
-
@mixin generate-icon($type) { .icon-#{$type} { display: inline-block; } }是合法且常用模式 - 变量必须已定义、作用域可见，
@mixin内部引用外部变量前要确认没被同名参数遮蔽 - 拼出的选择器名需符合 CSS 规范（如不能以数字开头），
$type: "123"→.icon-123合法，但.123-icon就非法且不报错
#{} 在选择器里和属性名里的行为一致，但用途完全不同
两者都是纯字符串拼接，但场景不可互换：选择器插值用于构造类名、伪类、属性选择器等；属性名插值（如 #{$prop}-color）用于生成带前缀或变体的 CSS 属性。它们共同点是——CSS 解析器永远见不到 $ 或 #{} ，只看到最终拼出来的字符串。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
[data-role="#{$role}"]→ 编译为[data-role="admin"] -
@at-root .#{$namespace}-btn { ... }常用于 BEM 风格命名隔离 - 不要在属性值里滥用
#{}：color: #{$c}和color: $c效果一样，前者多此一举
空格、作用域、非法字符是三个高频翻车点
插值本身简单，但稍不注意就产出无效 CSS：编译器不校验，浏览器静默忽略，调试时很难定位。
立即学习“前端免费学习笔记（深入）”；
-
.foo-#{$size} -bar中的空格会导致输出.foo-md -bar（含空格的选择器），等价于两个独立选择器，而非一个类名 -
$prefix: "btn"; .#{$prefix}-primary { ... }没问题，但若$prefix未声明或写成$Prefix（大小写敏感），编译直接报错 - 拼出
--#{$name}这类自定义属性名看似合理，但无法配合var(--#{$name})使用——后者是运行时语法，#{}只发生在编译期，二者不在同一阶段
真正容易被忽略的是：插值产出的是静态 CSS 字符串，不是 JS 式的“动态响应”。你改了变量值，必须重新编译才能更新 CSS 文件；它不参与 DOM 更新、不监听状态变化，也不和 Vue/React 的响应式系统挂钩。
