占位符选择器

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

SCSS  语法

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

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

Sass语法

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


%strong-alert:hover 
  color: red

CSS  输出

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

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

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语法

%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  输出

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

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

.reset-buttons {
  color: #cddc39;
}

在编写可能使用或不使用每个样式规则的Sass库时，占位符选择器很有用。根据经验，如果只为自己的应用程序编写样式表，则最好扩展类选择器（如果有）。