從「Day 16 - 自定義類名」這個單元開始，說明了一系列自定義屬性的方法，Master CSS 總共可以自定義的屬性總共有七種，而今天要介紹的是最後一種 semantics。

• Day 16 - 自定義類名（classes）
• Day 17 - 自定義顏色（colors）
• Day 18 - 自定義響應式斷點（breakpoints）
• Day 19 - 自定義媒體查詢（mediaQueries）
• Day 20 - 自定義配色方案（colorSchemes）
• Day 21 - 自定義 CSS 屬性值（values）
• Day 22 - 自定義 CSS 語意類名（semantics）

自定義 CSS 語意類名

假設想要使用 CSS 的 display: block;，Master CSS 有以下幾種寫法：

• display:block（注意冒號 : 後面沒有空格）
• d:block
• block

上面三種類名都是代表 display: block; 這個屬性。

<div class="display:block d:block block"></div>

.display\:block {
  display: block;
}

.d\:block {
  display: block;
}

.block {
  display: block;
}

除了 Master CSS 提供的語法外，開發者還可以自定義語意類名，舉個例子，設定 show 這個類名來表示 display: block; 這個屬性。

將 extend 裡的第一個參數設定為 semantics，代表要自定義的是語意類名。

const Styles = window.MasterStyles;

// 自定義配置
Styles.extend('semantics', {
  display: {
    show: 'block' // => display: block;
  }
});

window.initMasterCSS();

設定完成後，即可在元素上使用類名 show。

<div class="show"></div>

編譯出來的 CSS 規則如下：

.show {
  display: block;
}

再舉個例子，設定 hide-text 這個類名來表示 font-size: 0; 這個屬性。

const Styles = window.MasterStyles;

// 自定義配置
Styles.extend('semantics', {
  display: {
    show: 'block' // => display: block;
  },
  fontSize: {
    'hide-text': 0 // => font-size: 0px;
  }
});

window.initMasterCSS();

設定完成後，即可在元素上使用類名 hide-text。

<h1 class="hide-text">Hello World!</h1>

編譯出來的 CSS 規則如下：

.hide-text {
  font-size: 0px;
}

總結

本日 codepen 連結

今天的自定義 CSS 語意類名是最後一篇自定義的文章，Master CSS 總共可以自定義七種屬性，分別為類名（classes）、顏色（colors）、響應式斷點（breakpoints）、媒體查詢（mediaQueries）、配色方案（colorSchemes）、CSS 屬性值（values）、CSS 語意類名（semantics），對於開發者的客製化需求是非常友善的。

參考

• Master CSS 官網 - 自訂