“％”，这是什么意思

Question

我看到这个代码，当我被检查的Drupal欧米茄主题4

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

什么是“％集装箱”是什么意思？ '％'是什么？

Answer 1

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

占位符选择器：％FOO

萨斯支持一种特殊类型的选择称为“占位符 选择器”。这些看起来像class和id选择器，除了＃或。 被替换为％。它们旨在用于@extend指令; 欲了解更多信息，请参阅@ extend-Only选择器。

本身不使用@extend，使用 占位符选择器的规则集不会呈现为CSS。

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展现出来，只有选择器，e xtend它们将包含在输出中。

更多信息

http://thesassway.com/intermediate/understanding-placeholder-selectors

工具

如果你想萨斯周围玩，请使用 - http://sassmeister.com/