sass - SASS中的'%'是什么意思

Question

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

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

'%container' 是什么意思？'%' 是干什么用的？

Answer 1

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholder_selectors_foo

占位符选择器：%foo

Sass 支持一种特殊类型的选择器，称为“占位符选择器”。这些看起来像 class 和 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;
}

Answer 2

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 中，只有扩展它们的选择器才会包含在输出中。

更多信息

http://thesassway.com/intermediate/understanding-placeholder-selectors

工具

如果你想玩 Sass，请使用 - http://sassmeister.com/

Answer 3

这是一个占位符选择器。它自己不做任何事情，但可以扩展，就像抽象基类一样。