自定義 CSS 屬性值

前幾個單元介紹的 Style.extend 方法，它能夠自定義的有 classes、colors、breakpoints、mediaQueries 這四種屬性，分別對應以下的單元：

• Day 16 - 自定義類名（classes）
• Day 17 - 自定義顏色（colors）
• Day 18 - 自定義響應式斷點（breakpoints）
• Day 19 - 自定義媒體查詢（mediaQueries）

const Style = window.MasterStyle;

// 自定義配置
Style.extend(property, ...settings);

window.initMasterCSS();

而今天要介紹的 Styles.extend 這個方法，它能夠自定義的有 values 以及 semantics 這兩種屬性。

將 extend 裡的第一個參數設定為 values，代表要自定義的是 CSS 屬性值，這邊以寬度 width 來當作範例：

const Styles = window.MasterStyles;

// 自定義配置
Styles.extend('values', {
  width: {
    '2x': '2rem', // => width: 2rem;
    '3x': '3rem' // => width: 3rem;
  }
});

window.initMasterCSS();

設定完成後，即可在 width 這個屬性裡面使用 2x 及 3x 這兩個自定義的值。

<div class="w:2x w:3x@sm"></div>

編譯出來的 CSS 規則如下：

.w\:2x {
  width: 2rem;
}

@media (min-width: 768px) {
  .w\:3x\@sm {
    width: 3rem;
  }
}

總結

本日 codepen 連結

Master CSS 的自定義有分為 Style.extend 以及 Styles.extend 這兩種方法，Style.extend 能夠自定義的有 classes、colors、breakpoints、mediaQueries 這四種屬性，Styles.extend 能夠自定義的有 values 以及 semantics 這兩種屬性，在使用上的時候要注意不要搞混了。

參考

• Master CSS 官網 - 自訂