Sass占位选择器的实际应用场景是什么？

在Sass官方文档的**占位选择器（Placeholder Selectors）**章节中提到：

有时你希望编写仅用于被继承的样式规则，这时可以使用占位选择器……包含占位选择器的规则不会出现在CSS输出中，但继承它们的选择器会被输出。

文档给出了如下SCSS示例：

.alert:hover, %strong-alert {
    font-weight: bold;
}

%strong-alert:hover {
   color: red;
}

它编译后的CSS代码如下：

.alert:hover {
    font-weight: bold;
}

文档的解释到此为止，并未清晰说明其中原理。如果仅编写如下SCSS代码：

.alert:hover {
    font-weight: bold;
}

编译后的CSS效果完全相同。文档也未说明%strong-alert:hover的实际作用，因为它没有输出内容。我理解这是预期结果，如前文所述“包含占位选择器的规则不会出现在CSS输出中”。

但这引出了疑问：占位选择器的实际应用场景是什么？能否给出%strong-alert:hover的使用示例？

占位选择器的核心价值：复用可继承的样式片段 #

占位选择器的本质是定义仅用于被继承的“样式模板”，它不会单独输出到CSS中，只有当其他选择器通过@extend继承它时，才会把对应的样式合并到继承的选择器里。它的核心场景是：

• 避免生成无用的基础类（比如不用写一个永远不会直接在HTML里用的.strong-alert类）
• 批量复用复杂的样式组合，尤其是带伪类、嵌套的样式规则

%strong-alert:hover的实际使用示例 #

要让%strong-alert:hover生效，需要其他选择器通过@extend继承%strong-alert，这时Sass会自动把占位选择器的伪类规则也合并到继承的选择器中。比如：

// 定义占位选择器及其伪类样式
.alert:hover, %strong-alert {
    font-weight: bold;
}

%strong-alert:hover {
   color: red;
}

// 让其他选择器继承占位选择器
.success-alert {
    @extend %strong-alert;
    background-color: #d4edda;
}

.error-alert {
    @extend %strong-alert;
    background-color: #f8d7da;
}

编译后的CSS会变成：

.alert:hover, .success-alert, .error-alert {
    font-weight: bold;
}

.success-alert:hover, .error-alert:hover {
   color: red;
}

.success-alert {
    background-color: #d4edda;
}

.error-alert {
    background-color: #f8d7da;
}

可以看到：

1. %strong-alert本身没有输出，但.success-alert和.error-alert继承了它的基础样式
2. %strong-alert:hover的样式被自动应用到了.success-alert:hover和.error-alert:hover上
3. 避免了重复编写font-weight: bold和:hover的颜色规则，同时没有生成多余的基础类

典型应用场景 #

• 组件样式复用：定义通用的组件状态模板（如 hover、active 状态），让多个组件继承这些状态样式
• 主题样式统一：定义主题相关的占位选择器（如%theme-primary、%theme-hover），让不同元素继承主题样式，方便统一修改
• 避免样式冗余：当多个选择器需要共享一组复杂样式（包括伪类、媒体查询）时，用占位选择器代替重复编写，也不会生成无用的CSS类

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