預設顏色

雖然 Master CSS 官方有提供許多預設的顏色，但大部分開發者都需要依照設計而有自定義顏色的需求。

自定義顏色

在昨天的「Day 16 - 自定義類名」這個單元裡，有介紹到如何自定義類名，物件裡面的 key 對應的是類名 btn，value 對應的是樣式組合 inline-flex center-content font:14 font:semibold font:white bg:indigo px:18 h:40 r:4。

const Style = window.MasterStyle;

// 自定義配置
Style.extend('classes', {
  btn: 'inline-flex center-content font:14 font:semibold font:white bg:indigo px:18 h:40 r:4'
});

window.initMasterCSS();

而自定義顏色的方法其實大同小異，將 extend 裡的第一個參數設定為 colors，代表要自定義的屬性是顏色，物件裡面的 key 對應的是顏色的名稱 primary，value 對應的是色碼 0abab5。

const Style = window.MasterStyle;

// 自定義配置
Style.extend('colors', {
  primary: '0abab5'
});

window.initMasterCSS();

設定完成後，即可使用 primary 這個自定義的顏色。

<h1 class="f:primary">Hello World!</h1>

.f\:primary {
  color: rgb(10, 186, 181);
}

自定義色階

除了設定單個顏色外，也可以使用物件的方式設定色階。

const Style = window.MasterStyle;

// 自定義配置
Style.extend('colors', {
  primary: '0abab5',
  purple: {
    '': '491d8b',
    50: 'a56eff',
    60: '8a3ffc',
    70: '6929c4'
  }
});

window.initMasterCSS();

類名使用方法如下：

<h1 class="f:purple">Hello World!</h1>
<h1 class="f:purple-50">Hello World!</h1>
<h1 class="f:purple-60">Hello World!</h1>
<h1 class="f:purple-70">Hello World!</h1>

.f\:purple {
  color: rgb(73, 29, 139);
}

.f\:purple-50 {
  color: rgb(165, 110, 255);
}

.f\:purple-60 {
  color: rgb(138, 63, 252);
}

.f\:purple-70 {
  color: rgb(105, 41, 196);
}

自定義多種屬性

Master CSS 可以串接多個 extend 以自定義多種屬性（classes、colors …）。

const Style = window.MasterStyle;

// 自定義配置
Style
  // classes
  .extend('classes', {
    btn: 'inline-flex center-content font:14 font:semibold font:white bg:indigo px:18 h:40 r:4'
  })
  // colors
  .extend('colors', {
    primary: '0abab5',
    purple: {
      '': '491d8b',
	  50: 'a56eff',
	  60: '8a3ffc',
	  70: '6929c4'
    }
  });

window.initMasterCSS();

總結

本日 codepen 連結

除了自定義顏色外，Master CSS 也能自定義色階以及同時設定多種屬性，滿足開發者不同的使用情境。

參考

• Master CSS 官網 - 色彩
• Master CSS 官網 - 自訂