selector-append 是唯一能安全拼接选择器字符串的内置函数，其他字符串拼接（如 #{} 插值或 str-slice）生成的选择器在编译期不校验语法，运行时可能失效；它自动处理空格、伪类括号等边界情况，而 #{} 仅作纯文本替换，无法识别非法选择器如 ".button :hover"。
selector-append 是唯一能安全拼接选择器字符串的内置函数，其他字符串拼接（如 #{} 插值或 str-slice）生成的选择器在编译期不校验语法，运行时可能失效。
为什么不能用字符串插值拼接选择器
SCSS 中直接用 #{} 拼接类名看似简单，但会绕过选择器语法校验：
- 例如
.#{$base}#{$modifier}生成.button.primary是对的，但若$modifier值为" :hover"（带空格），就会产出非法选择器.button :hover，而 SCSS 不报错 - 插值结果是纯文本，
selector-append则把参数当作已解析的选择器结构处理，内部做语义合并 - 它自动处理空格、逗号、伪类括号等边界情况，比如
selector-append(".btn", ":focus-within")→.btn:focus-within，不会多加空格
selector-append 的合法参数类型与限制
该函数只接受已解析的选择器（即能被 SCSS 正确识别的字符串），不是任意字符串：
- ✅ 支持：类名
".primary"、ID"#header"、元素"a"、伪类":hover"、属性选择器"[data-role='tab']" - ❌ 不支持：
".btn .icon"（含空格的后代选择器）、".btn, .link"（含逗号的列表）、".btn > span"（子选择器符号）——这些会被当作单个非法选择器拒绝 - ⚠️ 注意：
selector-append(".btn", ".small")→.btn.small；但selector-append(".btn", " .small")（前面加空格）会报错："SassError: Invalid CSS after ".btn ": expected selector..."
配合 @each 和占位符生成 BEM 风格选择器
真实项目中常需批量生成修饰符类（如 .card--hover、.card--disabled），selector-append + 占位符最稳妥：
$block: ".card";
$modifiers: "hover" "disabled" "loading";
@each $mod in $modifiers {
$sel: selector-append($block, "--#{$mod}");
#{$sel} {
opacity: if($mod == "disabled", 0.5, 1);
}
}
编译后为：
.card--hover { opacity: 1; }
.card--disabled { opacity: 0.5; }
.card--loading { opacity: 1; }
- 这里
--#{$mod}是字符串插值，但只用于构造修饰符后缀，主干仍由selector-append合并，保证整体合法性 - 若改用
.#{$block}--#{$mod}，当$block是"div.card"时会出错；而selector-append要求第一参数必须是单一选择器，提前暴露问题
容易被忽略的兼容性坑：Dart Sass 严格模式
Dart Sass（当前主流实现）对选择器结构校验更严，以下写法在旧版 Ruby Sass 中可能侥幸通过，但在 Dart Sass 中直接报错：
-
selector-append(".btn", ".icon::before")→ ❌ 不支持伪元素作为第二参数（伪元素只能出现在末尾，且不能参与拼接） -
selector-append(".btn[data-size]", ".large")→ ❌ 属性选择器末尾缺值（[data-size]合法，但[data-size].large是非法组合） - 所有参数必须是字符串字面量或变量，不能是函数调用结果（如
selector-append(to-string($var), ".active")会失败）
真正动态的场景（如从 map 构建选择器）建议改用 @at-root + & 父选择器嵌套，而非强行塞进 selector-append。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
