直接拼接$prefix变量生成类名失效，因Sass选择器顶层不支持插值；需用@at-root+#{ }、meta.load-css()或@mixin封装；推荐通过@mixin prefixed($name)解耦前缀逻辑，并配合@forward with实现跨项目前缀注入。
为什么直接用 $prefix 变量拼接类名会失效
常见错误是写成 .#{$prefix}-button { ... }，结果编译后啥都没出来，或者报错 Invalid CSS after ".": expected selector, was "#{"。这不是语法写错了，而是 Sass 在解析选择器时对插值有严格限制：只有在“可插值上下文”里（比如属性值、@media 值、calc() 内部）才允许 #{} ；而选择器顶层位置默认不支持动态生成——除非你显式启用。
真正起作用的是 @at-root + #{} 组合，或者改用 meta.load-css()（Sass 1.70+）这类高级机制。但对大多数项目，更稳妥的做法是把前缀逻辑收口到混入（@mixin）里，由开发者显式调用。
用 @mixin 封装带前缀的组件类名生成
这是目前最可控、最易调试的方式。它把命名空间逻辑和样式定义解耦，避免在每个选择器里重复写 #{$prefix}-xxx。
- 定义一个
_mixins.scss文件，里面写：
@mixin prefixed($name) {
.#{$prefix}-#{$name} {
@content;
}
}
// 使用示例
@include prefixed('button') {
padding: 0.5rem 1rem;
background-color: $color-primary;
}
-
$prefix必须在@mixin被调用前已定义且在作用域内可见（推荐在_config.scss中定义并@use导入） - 不能在
@mixin内部重新定义$prefix，否则会遮蔽外层变量 - 如果需要多级嵌套前缀（如
app-foo-button），建议把$prefix设为app-foo，而不是拆成两层变量拼接
@forward + with 实现跨项目前缀注入
当你的 SCSS 库被多个子项目复用，且每个项目要求不同前缀（比如 admin-、shop-），硬编码 $prefix: 'admin-' 就不灵活了。这时要用配置转发机制。
在库的 _index.scss 中：
// _index.scss @forward 'config' with ( $prefix: 'admin-' !default ); @forward 'components';
子项目入口 main.scss 中覆盖：
@use 'my-scss-lib' with ( $prefix: 'shop-' );
-
$prefix必须在_config.scss中声明为!default，否则with无效 - 不要在
with中传表达式，只传字面量或已定义变量：✅ $prefix: 'shop-'; ❌ $prefix: $project-key + '-'; - 这种模式下，所有依赖
$prefix的@mixin或@function都能自动拿到新值，无需改业务代码
插值进 data- 属性或伪类内容时的陷阱
除了类名，你可能还想动态生成 data- 属性或 ::before 的 content 值。这时插值看似简单，但容易忽略类型安全。
-
content: '#{$prefix}loading';—— 没问题，字符串插值安全 -
data-prefix="#{$prefix}";—— 注意引号：若$prefix是admin-，输出是data-prefix="admin-"，合法 -
border-color: darken($prefix-color, 10%);—— 错！$prefix-color是字符串，darken()只接受颜色值，会报Function darken() can't operate on a string - 如果前缀本身要参与颜色运算（比如
$primary-color-dark），必须单独定义对应的颜色变量，而不是靠字符串拼接
真正难的不是写法，而是想清楚哪些东西该动态生成、哪些该静态定义。前缀是标识符，不是样式值；把它和颜色、尺寸混在一起管理，迟早要返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
