sass中选择器插值必须前置固定符号（如.、#），因语法解析阶段插值未展开，无法通过起始校验；需用@at-root脱离嵌套、@mixin封装前缀逻辑，并注意属性名插值合法而选择器插值受限。
插值#{}不能直接用在选择器开头，必须前置固定符号
写 .class-#{$suffix} 看似合理，但 Sass 编译会报错：Invalid CSS after ".class-": expected class name。根本原因是 Sass 解析选择器时，要求开头必须是合法标识符（字母、下划线或连字符），而 #{$suffix} 在语法分析阶段尚未展开，无法参与“起始校验”。.、#、[ 这类固定前缀必须显式写出，插值只能出现在其后。
@at-root 是生成独立类名的必要手段
想让 .btn-#{$type} 正常编译，必须脱离当前嵌套上下文。否则它可能被包裹进父选择器里，变成 .parent .btn-primary 这种非预期结构。
-
@at-root把规则提升到根作用域，确保输出为独立 CSS 类 - 插值位置必须在固定字符串之后，例如
.btn-#{$type}✅，但#{$prefix}btn❌（缺前置点号） - 若需 BEM 风格，写成
.#{$block}__#{$element}，所有.、__、--都得手动拼写，不能靠变量提供
用 @mixin 封装前缀逻辑更安全可控
直接在每个选择器里写 .#{$prefix}-button 容易出错且难以维护。推荐把前缀逻辑收口到混入中：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
@mixin prefixed($name) {
.#{$prefix}-#{$name} {
@content;
}
}
<p>@include prefixed('button') {
padding: 0.5rem 1rem;
}</p>
$prefix 必须在调用前已定义且可见（比如在 _config.scss 中声明并 @use 导入）。不要在 @mixin 内部重新赋值，否则会遮蔽外层变量。
属性名插值和选择器插值不是一回事
#{$prop}-color 这类属性名插值是完全合法的，因为 SCSS 只做字符串拼接，不校验 CSS 合法性；但选择器插值受语法解析阶段严格约束。
- 属性值一般不用
#{}：写color: $color就行，color: #{$color}多余 - 属性名必须用
#{}：CSS 不认识$prop-color，必须拆成#{$prop}-color - 拼出来的名字要合法：若
$prop: "123"，则#{$prop}-color输出123-color，浏览器会忽略（数字开头非法）
真正容易被忽略的是作用域和空格——margin- #{$dir} 中的空格会让编译结果变成 margin- top，CSS 直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
