在scss的预编译语法中，%符号用于定义占位符选择器，这是一种特殊的样式定义方式，不会直接输出到编译后的css文件里，只有被其他选择器继承时才会生效，是提升样式复用率的常用手段。
%占位符的基本定义语法
定义占位符选择器时，需要在选择器名称前加上%符号，后面跟着样式规则，基本语法如下：
// 定义一个占位符，设置基础按钮样式
%base-button {
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
border: none;
outline: none;
}
// 定义另一个占位符，设置主色背景
%primary-bg {
background-color: #1890ff;
color: #ffffff;
}
%占位符的使用方式
占位符定义后，需要通过@extend指令来继承使用，被继承后才会生成对应的css代码，示例如下：
// 继承base-button占位符
.btn-primary {
@extend %base-button;
@extend %primary-bg;
}
.btn-success {
@extend %base-button;
background-color: #52c41a;
color: #ffffff;
}
.btn-warning {
@extend %base-button;
background-color: #faad14;
color: #ffffff;
}
上述scss编译后的css代码如下，可以看到占位符本身没有输出，只有继承它的选择器生成了对应样式：
.btn-primary, .btn-success, .btn-warning {
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
border: none;
outline: none;
}
.btn-primary {
background-color: #1890ff;
color: #ffffff;
}
.btn-success {
background-color: #52c41a;
color: #ffffff;
}
.btn-warning {
background-color: #faad14;
color: #ffffff;
}
%占位符和混合器的区别
很多开发者会混淆%占位符和混合器@mixin的用法，两者虽然都能实现样式复用，但核心差异明显：
- 混合器编译后会在每个调用处生成完整的样式代码，可能导致css冗余
- %占位符被继承时，相同的样式会合并到同一个选择器中，减少重复代码
- 混合器可以接收参数，实现动态样式输出，%占位符不支持传参
当需要实现无参数、通用性强的样式复用时，优先选择%占位符；需要动态传参生成不同样式时，选择混合器更合适。
%占位符的使用注意事项
使用%占位符时需要注意以下几点：
- 如果没有任何选择器继承占位符，占位符对应的样式不会出现在最终css中，不会造成冗余
- 占位符可以嵌套定义，继承时会连同嵌套内的样式一起继承
- 占位符不能被普通css选择器直接引用，必须通过
@extend指令使用 - 如果占位符的样式中有媒体查询等条件规则，继承时需要注意作用域的匹配问题
适用场景总结
%占位符适合以下场景：
- 定义多个组件通用的基础样式，比如按钮的基础内边距、边框样式等
- 需要合并相同样式到同一个选择器，减少css文件体积的场景
- 不需要动态传参的静态样式复用场景
合理使用%符号定义占位符，能让scss代码结构更清晰，编译后的css更简洁，提升项目的样式可维护性。