「％」，這是什麼意思

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/