文件

樣式表示範

樣式表的可用範例與撰寫介面。

CSS 指令會改變輸出的樣式表時，請使用 StylesheetExample。伺服器會以目前的 preset 編譯字面值原始碼，並顯示完整結果，包含必要變數與 keyframes。這組呈現方式重用 DocumentCodeExample，提供鍵盤複製、可見焦點與剪貼簿回饋，不會在頁面上執行視覺效果。

原生規則使用的 token

@theme {  --color-brand: #4f46e5;}.card {  background-color: var(--color-brand);}

產生的 CSS

.card {  background-color: var(--color-brand);}@layer theme {  :root,  :host {    --color-brand: #4f46e5  }}

加入安全清單的 token

@theme {  --color-brand: #4f46e5;}@safelist "bg-brand";

產生的 CSS

@layer theme {  :root,  :host {    --color-brand: #4f46e5  }}@layer utilities {  .bg-brand {    background-color: var(--color-brand)  }}

沒有相符 class 的資源

@layer theme {  :root, :host {    --color-brand: #4f46e5;  }}@keyframes fade-in {  to { opacity: 1; }}

產生的 CSS

@layer theme {  :root,  :host {    --color-brand: #4f46e5;  }}@keyframes fade-in {  to {    opacity: 1;  }}

selector: 主題宣告中的明確原生選擇器。

<StylesheetExample  title="A safelisted color token"  source={"@theme { --color-brand: #4f46e5;  }\n\n@safelist \"bg-brand\";"}/>

元件接受標題與獨立的 CSS 原始碼。匯入、參照或資產需要多個檔案時，請使用有 fixture 支援的範例。編譯器應留在伺服器端，可攜 Markdown 要保留每一行來源與結果，並允許程式碼在自己的區塊內捲動。建置錯誤必須在文件檢查中明確呈現。

上方的 token、safelist 與原生資源範例共用同一種呈現方式。DocumentOptions 的說明也接受行內程式碼與連結，名稱與選填的預設值仍分開呈現。兩種元件都應放在測量用示範版面之外。

實際用法請參閱主題與變體、受管理的定義與條件區塊。