占位符选择器

Sass 有一种特殊的选择器，称为“占位符”。它看起来和行为很像一个类选择器，但它以 % 开头，并且不包含在 CSS 输出中。事实上，任何甚至包含占位符选择器的复杂选择器（逗号之间的选择器）都不会被编辑进 CSS 中，任何包含占位符选择器的样式规则也不被编译到 CSS 文件中。

scss 语法 css 语法 
.alert:hover, %strong-alert {
  font-weight: bold;
}

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

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


占位符选择器有什么用？它仍然能被继承的！与类选择器不同，在占位符没有被 @extend ，没有被库用户为 HTML 使用特定的类名，他们就不会把CSS弄得杂乱无章。

scss 语法 css 语法 
%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;
}

.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 库时很有用。根据经验，如果您只是为自己的应用程序编写样式表，通常最好只扩展一个可用的类选择器。

上篇： 父选择器

下篇： 变量