SASS中的“％”是什么意思

ass CSS

Tony凯

2020-03-23

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

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

'％container'是什么意思？“％”是什么意思？

第3019篇《SASS中的“％”是什么意思》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
乐米亚 2020.03.23

萨斯

%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/

GO 2020.03.23

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

神无 2020.03.23

占位符选择器：％foo

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android