自定義類別

當你習慣了使用類別名稱來標記套用樣式後，隨著專案的增長，你可能會發現網頁中，有許多的按鈕具有相同的類別名稱，這時候你就可以來為這些建立按鈕樣式的類別標記，進行抽象化的命名，來提供後續按鈕樣式的重複使用。

雖然應該盡量避免過早的將類別名稱抽象化，但如果已經確定設計風格或這些按鈕或卡片樣式已經具備可以抽象化的資格，那麼你就可以很大膽的來為這些元件樣式進行類別的抽象化，自定義出能夠重複使用這個元件的樣式，常見的例如按鈕或卡片等等。

例如我們有一個按鈕，按鈕的樣式可能在許多地方做使用。

<button class="bg:indigo r:4 fg:white font:16 font:medium p:8|16">按鈕</button>

修改 Master CSS 的設定檔案（master.css.ts 或 master.css.js）

export default {
  styles: {
    btn: 'bg:indigo r:4 fg:white font:16 font:medium p:8|16'
  }
}

接著，我們就能夠使用自訂的 btn 類別名稱，來套用按鈕的樣式。

<button class="btn">按鈕</button>

你也可以在設定檔中的 classes 選項，定義一些更多的類別名稱，將值得被抽象化的樣式標記，來整理成一個自定義的類別來重複使用者些標記。

export default {
  classes: {
    card: {
      '': 'bg:white r:8',
      header: 'object:cover w:full',
      content: 'p:15'
    }
  }
}

接著，我們能重複使用這些自定義的類別來套用樣式

<div class="card">
  <img class="card-header" src="…" />
  <div class="card-content"></div>
</div>

自訂響應式斷點

Master CSS 官方所預設可以使用的斷點簡寫多達 11 種之多，支援了許多常見的裝置尺寸。

如果你想要擴充或覆蓋這些響應式斷點的標記所對應的寬度，可以修改 Master CSS 的設定檔案（master.css.ts 或 master.css.js）

export default {
  mediaQueries: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1536px'
  }
}

如此一來，我們就可以套用新尺寸的斷點標記

<div class="f:16 f:24@sm f:32@md f:40@lg f:48@lg f:56@lg">Master CSS</div>

產生的 CSS

@media (min-width: 1536px) {
  .f\:56\@2xl {
    font-size: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .f\:48\@xl {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .f\:40\@lg {
    font-size: 2.5rem;
  }
}

@media (min-width: 768px) {
  .f\:32\@md {
    font-size: 2rem;
  }
}

@media (min-width: 640px) {
  .f\:24\@sm {
    font-size: 1.5rem;
  }
}

.f\:16 {
    font-size: 1rem;
}

此外，你也可以自己命名斷點的標記名稱，來提供更具有意義的類別名稱

export default {
  mediaQueries: {
    mobile: '600px',
    tablet: '1024px',
    desktop: '1440px'
  }
}

設定好後，我們就可以套用這些的斷點標記

<div class="f:16 f:24@mobile f:36@table f:48@desktop">Master CSS</div>

自訂媒體查詢

當然，你也可以為 Master CSS 建立自訂的媒體查詢，修改 Master CSS 的設定檔案（master.css.ts 或 master.css.js）

export default {
  mediaQueries: {
      watch: '(max-device-width:42mm) and (min-device-width:38mm)'
  }
}

你就可以使用這個媒體查詢的標記

<div class="text:center@watch"></div>