前言

Master CSS 對於類別名稱過多過長的問題，提供了縮寫來縮短類別的名稱，而在開發上為了更優雅及高效，速記的簡寫因此而誕生，雖然簡寫對學習上或記憶上需要額外的時間來熟悉，但 Master CSS 也透過了歧異或聯想的方式來輔助你記住這些簡寫。

多種數值空白間隔的速記簡寫

語法：property:value|value|value|[…]

範例：padding:1rem|2rem

原本冗長的 padding 與 boder 個別設定各個方向的大小。

<p class="padding-top:1rem padding-bottom:1rem padding-left:2rem padding-right:2rem border-width:1px border-color:red border-style:solid">

在原生 CSS 你可能在 padding 的屬性值會以空格相間來表示不同方向的內距，在 class 中 Master CSS 是使用 | 表示，使用簡寫後：

<p class="padding:1rem|2rem border:1px|solid|red">

甚至使用屬性縮寫與單位轉換，可以極致的短：

<p class="p:16|32 b:1|solid|red">

因為我們不能在 class 屬性中使用空格，所以在 CSS 中原本使用空格來區分多格值的方式，在 Master CSS 是使用 | 表示。

<div class="m:10|20|30|40"></div>

對比原生 CSS：

div {
    margin: 0.625rem 1.25rem 1.875rem 2.5rem
}

Master CSS 的 Language Service，也特別使用淺灰色來降低分隔符號 | 的對比度，使其視覺上更接近原生 CSS 空白跟格符號 ``。

組合帶有歧異的簡寫

語法：property-name:value → property:value / property-name:value → value

範例：text:center / blur(4px)

原生的 CSS 部分屬性有提供將多個屬性與值合併成一個屬性簡寫來快速聲明，例如 padding、margin 或 border 等，這些簡寫屬性可以同時設定方向、甚至是框限粗細顏色等屬性值，但是原生的 CSS 並沒有提供這些單一屬性的簡寫。

舉例來說：

<p class="text-align:center font-size:1rem font-weight:bold border-style:solid filter:blur(4px)">

使用 Master CSS 簡寫能夠以下程式碼宣告樣式：

<p class="text:center font:1rem font:bold border:solid blur(4px)">

從上面的例子來看：

第一個類別 text:center 由兩個關鍵字 text 與 center 組合，但如果拆開來看，你會發現如果我們只設定 text ，是設定他的對齊方式還是顏色等，如果我的關鍵字只使用 center ，是什麼東西要置中？這就產生了歧異，而使用 Master CSS 將原先表達帶有歧異的關鍵字，透過組合消除歧異，也就是說不在摸稜兩可，使得 text:center 很明確知道是在設定文字置中對齊 text-align:center。

第二個類別 font:1rem 透過關鍵字 font 與 16rem 組合，辨識後將表達式消除歧異為設定字體大小 font-size:1rem。

第三個類別 font:bold 透過關鍵字 font 與 bold 組合，辨識後並不會因此辨識為設定字體大小，而是消除歧異後為設定字體粗細 font-weight:bold。

同理，第四個類別 border:solid 透過關鍵字 border 與 solid 組合，辨識後並不會因此辨識為設定框線粗細，而是消除歧異後為設定框線樣式 border-style:solid。

甚至在第五個類別 filter:blur(4px)，僅使用關鍵字 blur(4px) 仍可以正確的套用到 filter 屬性。

Master CSS 的歧異簡寫允許你可以修剪樣式的名稱，來縮短類別長度，甚至消除歧異從而讓屬性具有識別性，也能防止簡寫的覆蓋行為，例如，再使用 Master CSS 使用簡寫宣告了字體大小 font:1rem ，是不會失誤的轉換成原生的 CSS font:1rem 而是 font-size:1rem，意即不會影響到原生 CSS 簡寫 font 的使用。

符號簡寫

語法：property-name:value → symbol:value

範例：@fade|1s|ease / ~opacity|3s

Master CSS 使用 at 小老鼠符號 @ 與 波浪符號 ~ 來表示 animation 與 transition 的屬性簡寫。具原作者的設計理念，與我自己的理解，應該能更好的理解與記憶符號所要表示與象徵的意思。

• @ 表示 animation，符號設計的發想來自動畫需要定義 keyframes 的語法 @keyframes fade {…}，@ 符號內也正好對應 animation 的首字 a，實際使用上，你可以使用 @fade 來宣告淡化動畫。
• ~ 表示 transition，波浪曲線帶有點轉變、過渡的意思，當你看到波浪符號也很好的聯想到過渡的效果，所以使用波浪曲線符號來作為 transition 的簡寫，實際使用上，你可以使用 ~opacity 來宣告不透明度的過渡效果。