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

工具类

如果你要玩无礼的话，请用- http://sassmeister.com/

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

占位符选择器：％foo

Sass支持一种特殊的选择器，称为“占位符选择器”。除了＃或之外，它们看起来像类和id选择器。被％取代。它们应该与@extend指令一起使用；有关更多信息，请参见@ extend-Only选择器。

单独使用占位符选择器的规则集将不呈现为CSS，而无需使用@extend。

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