sass - SASS中%是什么意思？

Question

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

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

“%container”是什么意思？“%”有什么用？

Answer 1

https://sass-lang.com/documentation/style-rules/placeholder-selectors

Placeholder Selectors: %foo

Sass supports a special type of selector called a “placeholderselector”. 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.

On their own, without any use of @extend, rulesets that useplaceholder 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;
    }