前言

Master CSS 透過結構化的語法，涵蓋了所有原生的 CSS 功能，Master CSS 在類別上直接宣告原生 CSS 雖然方便，但也容易導致類別名稱過多過長的問題，為了解決這個問題讓瀏覽與開發上更迅速優雅，Master CSS 提供了許多縮寫與速記簡寫，並透過自有的引擎規則，進而簡化了 CSS 語法的撰寫。

語意即樣式特徵

語法：semantic
範例：block / flex / round

我們雖然可以在 class 直接編寫 CSS，但也會使得語法標記越變冗長。

<p class="text-transform:capitalize position:absolute display:block border-radius:50%">

這邊設計的概念是當原生的 CSS 屬性特徵，已經足以使用其值來準確傳達時，Master CSS 將直接使用該值用作於語意的類別。例如，display: block 中的 block 已經足以表達樣式為區塊，那我們就可以直接撰寫簡化的 block；display: flex 可以簡化為 flex。

簡化後，我們的標記大大地縮短，不僅降低了標記的複雜性，提高了可讀性，甚至屬性所預期的含義與視覺的想像也很容易聯想。

<p class="capitalize abs block round">

Master CSS 經過巧思的設計，並不會將所有屬性或值進行簡化，以至於簡化完反而變得模糊，舉例來說，font-weight:lighter 並沒有被簡化為 lighter，因為可能指的是亮度而不是字重。

要了解有關自定義語義的更多資訊，可以翻閱官方的語意文件。

屬性縮寫

語法：property-name:value → pn:value
範例：f:16 / jc:center

類別名稱過多過長嗎？試試看屬性縮寫吧！縮寫的方式也挺直觀，多數都是以屬性的首個字母作為縮寫。

<p class="font-size:1rem margin-top:32 justify-content:center">

使用縮寫後，大大簡短了類別名稱。

<p class="f:16 mt:32 jc:center">

使用縮寫取決與個人習慣與團隊共識，推薦你熟悉之後再來決定是否全部使用縮寫，或者部分保留容易理解的語法。

<p class="font:16 mt:32 justify-content:center">

下列這些屬性，也都可以用縮寫來表示。

<div class="width:32 height:32 border-radius:5 z-index:10 margin-top:1 margin-bottom:1 padding-left:1 padding-right:1">

使用縮寫後

<div class="w:32 h:32 r:5 z:10 ml:1 mr:1 pt:1 pb:1">

甚至使用 x 或 y 來表示方向。例如 ml:1 與 mr:1 可以合併為 mx:1，pt:1 與 pb:1 可以合併為 py:1。

<div class="w:32 h:32 r:5 z:10 mx:1 py:1">

使用縮寫可以顯著減少標記樣式類別的長度，並提高生產效率與優雅程式碼，常見的縮寫可以參考如下：

• 幾何形狀：寬度 w、高度 h、半徑 r。
• 坐標：X 軸 x、Y 軸 y、Z 軸 z。
• 間距：邊距（margin 外距）m、填充（padding 內距）p。
• 方向：上（top）t、下（bottom）b、左（left） l、右（right）r。

範例

<div class="scale(1.1):hover ~transform|.2s">
    <img class="untouchable" src="/static/media/phone.png" />
    <h1 class="
        abs inset:0 m:auto height:fit blend:overlay @flash|3s|infinite
        text:center font:7vw font:40@xs font:heavy fg:white
    ">
        你好，世界！
    </h1>
</div>

上面程式碼的效果如下，Master CSS 的樣式也可以透過這些縮寫簡寫等自訂語法來進行樣式的宣告。