占位符选择器 Placeholder Selectors

Sass 有一种特殊的选择器，称为“占位符”。

Sass 有一种特殊的选择器，称为“占位符”。它的外观和行为很像类选择器，但它以“%”开头，并且不包含在 CSS 输出中。事实上，任何包含占位符选择器的复杂选择器(逗号之间的选择器)都不会包含在 CSS 中，也不会包含所有选择器都包含占位符的样式规则。

scss

Scss

scss

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

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

未发出的选择器有什么用？它仍然可以扩展！与类选择器不同，占位符如果不扩展，就不会扰乱 CSS，并且它们不要求库的用户为其 HTML 使用特定的类名。

scss

Scss

scss

%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;
}

占位符选择器在编写 Sass 库时非常有用，因为每个样式规则可能用到也可能不用。根据经验，如果您只为自己的应用编写样式表，那么最好只扩展类选择器（如果有的话）。