'；%'；在SASS中，它是什么意思

我在检查Drupal Omega 4主题时看到了这段代码

 %container {
  @include container;
  @include grid-background;
}

“%container”是什么意思？ “%”代表什么？

占位符选择器：%foo

Sass支持一种特殊类型的选择器，称为“占位符” 选择器”。除了#或之外，它们看起来像类和id选择器。 替换为%。它们与@extend指令一起使用； 有关更多信息，请参阅@extend Only选择器

在不使用@extend的情况下，使用 占位符选择器将不会呈现为CSS

示例

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

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

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend %icon;
  /* error specific styles... */
}

.info-icon {
  @extend %icon;
  /* info specific styles... */
}

输出

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}

注意

占位符选择器有一个附加属性，它们不会显示在生成的CSS中，只有扩展它们的选择器才会包含在输出中

更多信息

工具

---

如果您想玩Sass游戏，请使用-

为什么这是公认的答案？它基本上就是这个参考：它甚至没有一个示例输入和输出。我建议修改这个答案，目前从其他答案中获得更多。@jasonleonhard来自：提问者可以将一个答案标记为“已接受”。接受并不意味着它是最好的答案，它只是意味着它对提出问题的人有效。尽管如此，它还是回答了一个问题：“‘在SASS中，它意味着什么？’伟大、简单的解释和比较。