什麼是佔位符、佔位選擇器 ( placeholder selector )
共用屬性 %equal-heights 沒有被其他樣式共用，編譯成 CSS 後並不會產生，稱為佔位選擇器或是占位符 (placeholder selector)。
Placeholder 如何使用與使用條件
- Sass / Scss 選取項型態稱作 Placeholders，針對每個元件給與 class 屬性，但卻從未使用過這個 class 名稱。
- Placeholders 的效果等同於類型 (Class) 符號上使用 %。
- Placeholders 保留原本 CSS 的規則，且只有當使用 @extend 才會有作用。
實例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | %message-shared { border: 1px solid #ccc; padding: 10px; color: #333; } %equal-heights { display: flex; flex-wrap: wrap; } .message { @extend %message-shared; } .success { @extend %message-shared; border-color: green; } .error { @extend %message-shared; border-color: red; } .warning { @extend %message-shared; border-color: yellow; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .message, .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } |
1 2 3 4 5 6 7 | .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; } |
1 2 3 4 5 6 7 8 9 | a%drink { font-size: 2em; background-color: red; } .lemonade { @extend %drink; padding: 10px; } |
1 2 3 4 5 6 7 8 | a.lemonade { font-size: 2em; background-color: red; } .lemonade { padding: 10px; } |
總結
佔位符、佔位選擇器 ( %placeholder ) 特性與重點
- %placeholder 配合 @extend 使用。
- %placeholder 會開出一個樣式的記憶體空位，先記下共用樣式內容，但實際輸出不會輸出，只有針對有引用到的樣式匯整進 %placeholder 預先開立的共用樣式位置。
%placeholder 與 @mixin、@include、@content 性質差異
- @mixin 將父層結構展伸帶出到使用的樣式對象。
- @mixin & @include 共用設定並取用。
- @include 是將 @mixin 內的。
- @content 加入內容，而內容是混進 @mixin 的結構內。
%placeholder 的特性是開出一個共用樣式集但佔位但不出現，比較合適透過 @for 的方式來操作共用性，讓程式碼共用的部份都集中在佔用的樣式集內。
@mixin、 @include、 @content 較像共用的樣式架構中重覆取用的方式，可以讓結構編寫較直覺取用共用與擴充伸展。
二個部份性質不同， %placeholder 針對編譯輸出的樣式屬性共用性集用，而 @mixin、 @include、 @content 像是一個包裝好的工具型函式，將現有共用樣式結構做重覆取用與擴充伸展。
另外如果要使用 %placeholder 來操作不同斷點，可以參考
Cross-Media Query @extend Directives in Sass 文章，透過 SCSS 的函式等方式的集合，產出較完整的對應架構