Sass占位符选择器%符号究竟是什么？

Sass中的占位符选择器（以%开头的选择器）是一种特殊的选择器类型，它的核心特点是：只会在被@extend引用时才会生成CSS代码，否则不会出现在编译结果中。以下是详细解析：

1. 基本语法

%placeholder-name {
  property: value;
}

2. 核心特性

• 惰性编译：如果未被@extend引用，占位符不会生成任何CSS代码。
• 复用逻辑：通过@extend可复用占位符中的样式，类似混合（Mixin），但编译机制不同。

3. 与Mixin和普通类的对比

4. 实际用例

场景：定义基础按钮样式，但不直接使用

%base-button {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
}

// 通过@extend引用
.primary-btn {
  @extend %base-button;
  background: blue;
}

.error-btn {
  @extend %base-button;
  background: red;
}

编译后的CSS：

.primary-btn, .error-btn {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
}

.primary-btn { background: blue; }
.error-btn { background: red; }

5. 为什么使用占位符？

• 避免冗余代码：与Mixin不同，@extend会将选择器合并，减少重复样式。
• 语义化标记：明确表示该选择器仅用于继承，而非直接使用。
• 性能优化：适合复用基础样式（如清除浮动、居中布局等）。

6. 注意事项

• 不可链式继承：Sass不允许@extend链式调用（如A继承B，B继承C）。
• 媒体查询限制：@extend不能在@media内外跨作用域继承。
• 过度合并风险：滥用可能导致选择器群组过大（如频繁继承通用样式）。

总结

占位符选择器是Sass中一种高效的样式复用工具，通过%定义的样式仅在需要时（通过@extend）输出，完美平衡了代码复用和输出控制。适合项目中需要多次复用但无需独立存在的样式片段。