SASS中的'%'是什么意思 [英] '%' in SASS, what does it mean

问题描述

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

I saw this code, when i was checking Drupal Omega 4 theme

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

'%container' 是什么意思?'%' 有什么用?

what does the '%container' mean? what is the '%' for?

推荐答案

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

占位符选择器:%foo

Placeholder Selectors: %foo

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

Sass supports a special type of selector called a "placeholder selector". These look like class and id selectors, except the # or . is replaced by %. They’re meant to be used with the @extend directive; for more information see @extend-Only Selectors.

独立的，不使用@extend，使用规则集占位符选择器不会渲染到 CSS.

On their own, without any use of @extend, rulesets that use placeholder selectors will not be rendered to 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中的'%'是什么意思的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！