如何在Sass的selector-append中结合父选择器&使用？

要生成&.-icon-default, &.-icon-darker, &.-icon-dark这类带父选择器的样式，你不需要硬编码所有实例，用selector-append结合以下方式就能实现：

方法1：直接传入拆分后的后缀参数 #

把父选择器&作为selector-append的第一个参数，每个后缀单独作为后续参数传入：

#{selector-append(&, ".-icon-default", ".-icon-darker", ".-icon-dark")} {
  // 你的样式代码
}

编译后会输出你想要的结果：

&.-icon-default, &.-icon-darker, &.-icon-dark {
  /* 样式内容 */
}

方法2：处理动态后缀列表 #

如果后缀是从变量或其他动态来源获取的，先通过selector-split把逗号分隔的字符串转成选择器列表，再用展开运算符...传入selector-append：

$icon-suffixes: "-default, -darker, -dark";
$split-suffixes: selector-split($icon-suffixes);

#{selector-append(&, $split-suffixes...)} {
  // 你的样式代码
}

这种方式同样能生成目标选择器，适合需要批量处理后缀的场景。

之前写法的问题 #

你之前的代码要么没把&作为selector-append的参数，要么把多个后缀写在同一个字符串里——selector-append会把带逗号的字符串当作单个选择器处理，自然得不到带父选择器的多选择器结果。直接传&到字符串里会报错，是因为&是SCSS的特殊选择器，不能直接嵌入字符串中使用。

内容的提问来源于stack exchange，提问作者Ahmed Ateeq