群組功能

群組功能是 Master CSS 中非常實用的一種語法糖，可以幫助我們將 "具有相同後綴" 的選取器、媒體查詢等樣式進行分組，從而簡短類名的長度和數量。

基本用法

我們在寫響應式斷點的時候會使用 @斷點 加在屬性後面，此時會發現當某一個斷點寫了很多屬性時，就會重複非常多次的 @斷點，舉個例子，下方的 @sm 就重複了六次：

<div class="flex@sm jc:center@sm ai:center@sm w:100@sm h:100@sm bg:red@sm round@sm"></div>

讓我們透過 Master CSS 的群組功能來簡化，首先將重複的 @sm 只留下一組。

<div class="flex jc:center ai:center w:100 h:100 bg:red round@sm"></div>

接著使用一組大括號 {} 將所有想要應用 @sm 的屬性包起來。

<div class="{flex jc:center ai:center w:100 h:100 bg:red round}@sm"></div>

最後，將屬性之間的空格使用一個分號 ; 串接，如此一來，我們只需要一組的 @sm 即可達到相同的效果。

你會發現使用大括號 {} 包住所有屬性，屬性後面使用 ; 當作結尾，這樣的寫法就跟 CSS 一樣。

<div class="{flex;jc:center;ai:center;w:100;h:100;bg:red;round}@sm"></div>

編譯出來的 CSS 規則如下：

@media (min-width: 768px) {
  .\{flex\;jc\:center\;ai\:center\;w\:100\;h\:100\;bg\:red\;round\}\@sm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.25rem;
    height: 6.25rem;
    background-color: rgb(209, 26, 30);
    border-radius: 50%;
  }
}

舉一反三

同樣的概念，只要是 "具有相同後綴（>li>a:hover@sm）" 的程式碼區塊，都可以使用群組功能來簡化。

<ul class="flex>li>a:hover@sm jc:center>li>a:hover@sm ai:center>li>a:hover@sm w:100>li>a:hover@sm h:100>li>a:hover@sm bg:red>li>a:hover@sm f:24>li>a:hover@sm f:white>li>a:hover@sm t:center>li>a:hover@sm"></ul>

<ul class="{flex;jc:center;ai:center;w:100;h:100;bg:red;f:24;f:white;t:center}>li>a:hover@sm"></ul>

編譯出來的 CSS 規則如下：

@media (min-width: 768px) {
  .\{flex\;jc\:center\;ai\:center\;w\:100\;h\:100\;bg\:red\;f\:24\;f\:white\;t\:center\}\>li\>a\:hover\@sm > li > a:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.25rem;
    height: 6.25rem;
    background-color: rgb(209, 26, 30);
    font-size: 1.5rem;
    color: rgb(255, 255, 255);
    text-align: center;
  }
}

總結

本日 codepen 連結

Master CSS 中的群組功能是我非常喜歡的一種語法糖，能夠讓我們將重複性的程式碼區塊進行分組處理。

參考

• Master CSS 官網 - 群組功能