宣告與值

class 以已註冊的 utility 或原生宣告開頭，後面可加選擇器、條件與重要性標記。本頁定義這些宣告形式、值解析與拒絕規則。完整教學請見語法教學，原生屬性的意義則請查閱 CSS 參考。

下方具名形式假設已透過 @import '@master/css' 載入預設集。專案定義可以新增或替換 utilities，原生宣告則不需要已註冊的 utility。

可用形式

這些是不同語法形式，不是可互換的拼寫。靜態、token 與函式 utilities 都可能包含多個宣告：truncate、text-sm 與 grid-cols(2) 都是組合樣式。原生開頭則恰好包含一個宣告，可使用 CSS 簡寫屬性。

@layer theme {  :root,  :host {    --spacing-md: 1rem  }}@layer utilities {  .flex {    display: flex  }  .p-md {    padding: var(--spacing-md)  }  .p\(12\) {    padding: calc(12 * 1px)  }  .\(padding\:1rem\) {    padding: 1rem  }}

每種形式都接受後綴。在 p(12):hover@sm! 中，開頭是 p(12)，:hover 是選擇器，@sm 是條件，! 則標記重要性。後綴只影響自己的 class。完整契約請見選擇器與條件。

原生宣告

以完整屬性名稱撰寫 (property:value)。Master CSS 會先讀取括號配對完整的開頭，再解析後綴。單獨名稱後的冒號會開始選擇器：flex:hover 選取已註冊的 flex utility，display:block 並不是 (display:block) 的替代形式。

結束邊界

字串、註解、跳脫、巢狀括號與方括號，以及未加引號的 url() token，都依循 CSS 組成值邊界。引號字串中的 ) 不會關閉開頭：

<span class="(content:')')::before"></span>

第一個右括號是引號內的值文字。下一個才結束宣告；::before 從宣告外開始。

文字說明

1. 在 (content:')')::before 中，content 是屬性，')' 是引號包住的值。
2. 字串內的 ) 會保留。下一個 ) 才結束原生宣告頭部。
3. ::before 後綴指向偽元素，生成的宣告為 content: ')';。

開頭內的其他 CSS 結構也保留各自邊界：

@layer utilities {  .\(background-image\:url\(\/a\{b\.svg\)\) {    background-image:url(/a{b.svg)  }  .\(grid-template-columns\:\[start\]\|1fr\|\[end\]\) {    grid-template-columns: [start] 1fr [end]  }  .\(width\:calc\(1px\+\(2px\*3\)\)\) {    width: calc(1px + (2px * 3))  }  .\(content\:\'\)\'\)\:\:before::before {    content: ')'  }}

值內仍適用 CSS 跳脫規則。未加引號的 URL 若含括號，請改用引號 URL 或 CSS 跳脫，維持 token 合法。

無效開頭

格式錯誤的開頭不會產生規則，也不會改以 utility 或其他 class 形式重試。

自訂屬性可以有空值或配對完整的大括號區塊：(--slot:) 與 (--state:{open}) 都合法。(--slot:!important) 是值為空的重要自訂屬性，(width:!important) 則無效。

輸出與瀏覽器合法性

語法合法的屬性名稱，即使工具沒有列出，也能輸出宣告。原生值不限於預設集，但仍必須是目標瀏覽器中該屬性的合法值。例如 (font-size:48) 會輸出 font-size: 48，不會自動取得 px，而這個非零無單位長度是無效 CSS。請用 (font-size:48px) 表達該長度。(field-sizing:content) 這類原生屬性不需要註冊 utility。

@layer utilities {  .\(field-sizing\:content\) {    field-sizing: content  }  .\(font-size\:48px\) {    font-size: 48px  }}

Master CSS 會輸出特定相容宣告，例如在 backdrop-filter 旁加入 -webkit-backdrop-filter，但不會加入廠商專屬選擇器，也不會替瀏覽器功能補上 polyfill。請檢查生成 CSS，並透過相容性選擇瀏覽器需求與備援設計。

@layer utilities {  .\(backdrop-filter\:blur\(16px\)\) {    -webkit-backdrop-filter: blur(16px);    backdrop-filter: blur(16px)  }  .\(background-color\:\#000\)\:\:-webkit-scrollbar::-webkit-scrollbar {    background-color: #000  }}

值的編碼

空白、字串與底線

即使值包含 CSS 引號，HTML 空白仍會分隔 class。class 值內未加引號的 | 會編碼一個空白；引號字串內的管線符號則維持原樣。逗號與斜線等 CSS 標點應保留在原位。

<div class="(color:rgb(30|60|90/80%)) (content:'a|b')::before"></div>

@layer utilities {  .\(animation-name\:slide_in\) {    animation-name: slide_in  }  .\(color\:rgb\(30\|60\|90\/80\%\)\) {    color: rgb(30 60 90/80%)  }  .\(color\:red\)_a a {    color: red  }  .\(content\:\'a\|b\'\)\:\:before::before {    content: 'a|b'  }}

色彩值會成為 rgb(30 60 90 / 80%)，content 字串則保留為 'a|b'。CSS 字串中需要真正空白時，請使用 \000020 這類 CSS 跳脫：(content:'New\000020collection')::before 會產生「New collection」。六位數跳脫可避免 HTML class 中出現終止空白。

原生開頭內的底線是字面字元，例如 slide_in。開頭結束後，_ 會開始後代選擇器：(color:red)_a 指向後代連結。已註冊 utility 名稱不能包含 _，但含底線的 token 鍵仍可透過 var(--name) 參照。

函式與明確變數

CSS 函式仍是原生屬性的值。Master CSS 會正規化 calc(100%-2rem) 中的算術空白，涵蓋最多 64 層巢狀括號與 1px-2px-3px 這類連續減法；更深的內容則保留原樣。計算由瀏覽器執行。Master CSS 不會從單獨字詞推論 token，也不會把 CSS 函式當作 utility 呼叫求值。

@layer theme {  :root,  :host {    --color-red-60: oklch(60.94% .2501 29.2)  }  :root,  :host {    --color-red: var(--color-red-60)  }}@layer utilities {  .\(color\:var\(--color-red\)\) {    color: var(--color-red)  }  .\(width\:calc\(100\%-2rem\)\) {    width: calc(100% - 2rem)  }  .\(width\:calc\(100\%-var\(--spacing-md\)\)\) {    width: calc(100%-var(--spacing-md))  }}

原生色彩值保留原意：(color:red)、(color:#175fe9) 與 (color:rgb(23,95,233)) 都提供 CSS 值，fg-red 則選取主題 token。var() 參照必須明確撰寫；(font-family:mono) 指定的是 CSS 字型家族 mono，不是 --font-mono。token 解析、模式與衍生值請見變數與模式。

數字與單位

原生宣告會保留單位，不會將 rem 轉成像素，也不會依屬性推論單位。小數前的零可以省略：(opacity:.5) 與 (opacity:0.5) 提供相同數值。

屬性是否接受數字、長度、百分比或其他型別，由 CSS 值與單位規則決定。p(12) 則不同：預設集的函式會明確將引數乘以 1px。

負值

原生負值寫在值內，例如 (margin-top:-2rem)。直接數值引數使用 mt(-8)。負值 token class 則在完整 class 前加上 -：-mt-sm。負值 token 形式需要數值型 token 與支援負值的 utility；padding 不支援負值，因此 -p-sm 會被拒絕。

@layer theme {  :root,  :host {    --spacing-sm: .75rem  }}@layer utilities {  .-mt-sm {    margin-top: calc(var(--spacing-sm) * -1)  }  .mt\(-8\) {    margin-top: calc(-8 * 1px)  }  .\(margin-top\:-2rem\) {    margin-top: -2rem  }}

引數驗證不會重新定義 CSS 屬性對值的限制。

已註冊的 utility

token 名稱

token 前綴由 utility 定義註冊，不會從屬性縮寫推論。p-md 讀取 --spacing-md；fg-red 與 bg-red 都讀取 --color-red，但設定不同屬性。不會自動產生 padding-md 這類完整屬性名稱的對應形式，也沒有 p-4 這類隱含數值尺度：所選命名空間中必須存在該鍵。

靜態名稱優先於拼法相同的 token class。例如，即使專案定義了 --container-full，w-full 仍是 width: 100%；即使存在 --radius-pill，pill 仍是全圓角半徑。名稱相同的靜態 utility 與函式會各自獨立註冊。

完整的前綴與命名空間對應請見 token 家族索引，註冊與取代規則請見 utility 定義。主題 token說明如何定義專案值並設定作用範圍。

兩個父元素皆寬 240px。自訂 --container-full 為 12rem（根元素字級 16px 時為 192px）；w-full 仍是固定的 100% utility。

文字說明

1. 設定定義 @theme { --container-full: 12rem; }。預設集已將完整固定名稱 w-full 註冊為 width: 100%。
2. 因此 w-full 填滿 240px 的父元素。明確的 (width:var(--container-full)) class 讀取 --container-full，讓第二個區塊寬 192px。
3. token 仍可透過明確的 var() 參照使用；定義它不會取代固定的 w-full 註冊。

直接數值

m(4)、b(1) 與 grow(1) 這類預設函式接受一個靜態數字。長度函式輸出乘以 1px 的運算；grow()、shrink() 與 order() 直接傳遞數值，其中 order() 要求整數。零、小數與負值引數是否可用，依各參數宣告的型別決定。

單位與動態運算式不屬於數值引數：m(1px) 與 b(var(--x)) 不會生成規則。這類值請使用 (margin:1rem) 或 (border-width:var(--x))。直接數值提供完整函式清單、參數型別與生成宣告。

組合樣式可協調多個屬性或伴隨值：text-sm 包含字級、行高與字距，animate-fade 則提供動畫簡寫。查找與覆寫規則分別見文字 token與動態效果 token。

自訂屬性

(--name:value) 頭部會在符合選擇器的元素上宣告 CSS 自訂屬性。它可使用與其他宣告相同的選擇器與條件，不會註冊 utility 或主題 token。

<div class="(--progress:40%) (--progress:60%):hover (width:var(--progress))">Progress</div>

@layer utilities {  .\(--progress\:40\%\) {    --progress: 40%  }  .\(width\:var\(--progress\)\) {    width: var(--progress)  }  .\(--progress\:60\%\)\:hover:hover {    --progress: 60%  }}

var(--progress) 使用一般 CSS 解析與繼承規則。未解析的變數或替換後不相容的值，可能讓引用該值的宣告失效；請視需要使用 CSS 變數備援值。語法教學說明如何固定 class，並另外提供動態值。

組合與重要性

分開的 class 表達獨立決策，例如 b(1) b-solid b-line-control。原生簡寫仍受支援；這項撰寫偏好不會改變 CSS 語法。需要相同選擇器與條件的每個 class 都要分別加上後綴。

<ul class="block>li:hover@md (font-size:14px)>li:hover@md text-center>li:hover@md">…</ul>

在相同串接層、條件與選擇器中，組合樣式排在單一宣告 utility 之前，接著才是原生宣告。單一宣告 utility 先依屬性家族與涵蓋範圍排序，再依值的來源排序；同一屬性中，token 會排在固定值或直接數值之前。HTML class 的順序不會決定結果：

@layer theme {  :root,  :host {    --spacing-md: 1rem  }}@layer utilities {  .m-md {    margin: var(--spacing-md)  }  .mx-auto {    margin-inline: auto  }  .mt\(0\) {    margin-top: calc(0 * 1px)  }  .p-md {    padding: var(--spacing-md)  }  .p\(12\) {    padding: calc(12 * 1px)  }  .\(padding\:1rem\) {    padding: 1rem  }}

此處原生 padding 排在兩個 utility 之後，而 mt(0) 與 mx-auto 會覆寫 m-md 的對應部分。完整排序契約見串接層。若要選擇元件 class、@utility 組合樣式或 CSS mixin，請見重複使用樣式。

重要性

結尾的 ! 會將該 class 的宣告標為重要。括號值內尾端的原生 !important 效果相同；同時撰寫兩者也只會輸出一次。字串內的 '!important' 仍是內容文字。

@layer utilities {  .text-center\! {    text-align: center !important  }  .\(color\:red\!important\) {    color: red !important  }  .\(color\:red\!important\)\! {    color: red !important  }  .\(content\:\'\!important\'\)\:\:before::before {    content: '!important'  }}

末端一個 ! 會標記全部三個宣告；省略號略去 token 參照。它不會將鄰近 HTML class 或主題 token 定義標為重要。

文字說明

1. text-sm 使用主要 token 與伴隨參照，寫入 font-size、line-height 與 letter-spacing。
2. text-sm! 將三個生成宣告都標為 !important。相依宣告仍是一般主題 token。

固定 utility 查找表

預設集提供 292 個固定、單一宣告的 utility，每個只設定表列的屬性：flex-col 不會啟用 flex 排版，b-none 不會重設邊框寬度，pill 也不會設定尺寸。包含多個宣告的 truncate 組合樣式另列於截斷。

start 與 end 保留原生語意，與 flex-start、flex-end 不同。邏輯軸中，x 表示行內軸，y 表示區塊軸；t、r、b、l 則是實體邊。固定 utility 接受選擇器、條件與 !，並在使用時輸出 CSS。