Question

当我检查Drupal Omega 4主题

时，我看到了这段代码

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

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

Answer 1

占位符选择器：％foo

Sass支持一种称为“占位符”的特殊类型的选择器   选择”。这些看起来像class和id选择器，除了＃或。   被％替换。它们意味着与@extend指令一起使用;   有关更多信息，请参阅@extend-Only选择器。

他们自己，没有使用@extend，使用的规则集   占位符选择器不会呈现给CSS。

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

Answer 2

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

Answer 3

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

SASS中的'％'是什么意思

3 个答案: