SCSS中的%占位符选择器详解

什么是%占位符选择器

%占位符选择器（Placeholder Selector）是SCSS/SASS中的一种特殊选择器，它以百分号（%）开头。与常规的类选择器不同：

• 它不会被编译到最终的CSS中
• 只有当它被@extend指令引用时才会生成对应的CSS代码
• 主要用于定义可复用的样式模块

基本语法

%placeholder-name {
  property: value;
  // 更多样式规则
}

如何使用%占位符

1. 定义占位符

%clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

2. 通过@extend使用占位符

.container {
  @extend %clearfix;
  // 其他样式
}

.sidebar {
  @extend %clearfix;
  // 其他样式
}

3. 编译结果

编译后的CSS中，所有扩展了%clearfix的选择器会被合并：

.container::after, .sidebar::after {
  content: "";
  display: table;
  clear: both;
}

%占位符 vs 类选择器

最佳实践

1. 用于纯样式复用：当样式纯粹是为了复用，不需要在HTML中直接使用时，使用%占位符

2. 避免过度使用：大量使用@extend可能导致选择器组合爆炸，影响性能

3. 命名规范：使用有意义的命名，通常以样式功能命名（如%visually-hidden, %center-block等）

4. 与mixin结合：对于需要参数的样式复用，使用@mixin；对于固定样式模块，使用%占位符

实际应用示例

// 定义占位符
%button-base {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

%primary-button {
  @extend %button-base;
  background-color: #3498db;
  color: white;

  &:hover {
    background-color: #2980b9;
  }
}

// 使用占位符
.submit-btn {
  @extend %primary-button;
}

.cancel-btn {
  @extend %button-base;
  background-color: #e74c3c;
  color: white;

  &:hover {
    background-color: #c0392b;
  }
}

通过合理使用%占位符选择器，可以创建更模块化、更易于维护的SCSS代码结构。