占位符选择器

Sass 有一种特殊的选择器，称为"占位符"。它看起来和行为上很像类选择器，但它以 % 开头，并且不会包含在 CSS 输出中。事实上，任何包含占位符选择器的复杂选择器（逗号之间的选择器）都不会包含在 CSS 中，任何选择器全部包含占位符的样式规则也是如此。

Playground

SCSS Syntax

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

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

Sass Syntax

.alert:hover, %strong-alert
  font-weight: bold


%strong-alert:hover
  color: red

CSS Output

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

那么一个不会被输出的选择器有什么用呢？它仍然可以被扩展！与类选择器不同，如果占位符没有被扩展，它们不会使 CSS 变得混乱，也不会强制库的用户为其 HTML 使用特定的类名。

Playground

SCSS Syntax

%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

.action-buttons {
  @extend %toolbelt;
  color: #4285f4;
}

.reset-buttons {
  @extend %toolbelt;
  color: #cddc39;
}
Playground

Sass Syntax

%toolbelt
  box-sizing: border-box
  border-top: 1px rgba(#000, .12) solid
  padding: 16px 0
  width: 100%

  &:hover
    border: 2px rgba(#000, .5) solid

.action-buttons
  @extend %toolbelt
  color: #4285f4


.reset-buttons
  @extend %toolbelt
  color: #cddc39

CSS Output

.reset-buttons, .action-buttons {
  box-sizing: border-box;
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
  padding: 16px 0;
  width: 100%;
}
.reset-buttons:hover, .action-buttons:hover {
  border: 2px rgba(0, 0, 0, 0.5) solid;
}

.action-buttons {
  color: #4285f4;
}

.reset-buttons {
  color: #cddc39;
}

在编写 Sass 库时，每个样式规则可能会被使用也可能不会被使用，占位符选择器就很有用。作为一个经验法则，如果你是为自己的应用编写样式表，通常最好直接扩展一个可用的类选择器。