Sass中不能用+拼接类名，因其仅支持数字加法或列表合并，+在CSS中为选择器连接符；应使用#{}插值拼接，如.#{$prefix}-item，并校验变量合法性。
拼接类名时为什么不能直接用 + 运算符
Sass 的 + 对字符串不起作用，它只支持数字加法或列表合并。直接写 .#{$prefix}+item 会报错 Invalid CSS after "...": expected "{", was "+" ，因为 Sass 把 + 当作选择器连接符（如 .a + .b），而非字符串拼接。
正确做法是用 #{} 插值配合字符串字面量拼接：
.#{$prefix}-item { color: red; }
注意：插值必须在引号内或选择器中显式包裹，否则 Sass 不解析变量。
concat() 函数在 Sass 中并不存在
很多人搜 “Sass concat string” 会误以为有类似 JavaScript 的 concat()，但 Sass 原生没有这个函数。试图调用 concat($prefix, '-item') 会报错 Function concat is not found。
立即学习“前端免费学习笔记（深入）”；
可用的替代方式只有插值和 str-slice()/str-insert() 等字符串函数（但它们不适用于类名拼接场景）：
- 最简方案：直接
.#{$prefix}-item - 多段拼接：用多个插值
.#{$prefix}-#{$suffix}-#{$state} - 避免空格或非法字符：提前用
str-replace()清洗变量值
动态生成多个类名时容易漏掉 @each 的作用域限制
当用 @each 循环生成带前缀的类名，比如 @each $type in (primary, secondary)，如果变量 $prefix 在循环外定义，它能正常读取；但如果在循环内重新赋值，且没声明 !global，后续插值会拿不到更新后的值。
常见错误写法：
@each $type in (primary, secondary) {
$prefix: 'btn-' + $type; // 局部作用域，下一轮循环失效
.#{$prefix} { padding: 4px; }
}
应改为：
@each $type in (primary, secondary) {
$prefix: 'btn-#{$type}'; // 插值更安全，无需变量重赋
.#{$prefix} { padding: 4px; }
}
使用 #{} 拼接时要注意 CSS 合法性校验
Sass 不检查插值后是否为合法类名。如果 $prefix 是空字符串、含空格或特殊符号（如 user name），输出会变成 .-item 或 .user name-item，浏览器直接忽略该规则。
建议加一层保护：
- 用
str-length($prefix) > 0判断非空 - 用
str-replace($prefix, ' ', '-')替换空格 - 避免在插值中直接拼接用户输入，尤其来自
@import或配置文件的值
真正麻烦的不是怎么拼，而是拼完之后类名不可用却没报错——得靠人工 inspect 元素才能发现。
