規則

規則定義了工具類別和產生的 CSS。UnoCSS 有許多內建規則，但也允許輕鬆新增自訂規則。

靜態規則

使用此範例

rules: [
  ['m-1', { margin: '0.25rem' }],
]

每當在使用者程式碼庫中偵測到 m-1 時，就會產生以下 CSS

.m-1 { margin: 0.25rem; }

**注意**：主體語法遵循 CSS 屬性語法，例如 font-weight 而不是 fontWeight。如果屬性名稱中存在連字號 -，則應將其用引號括起來。

rules: [
  ['font-bold', { 'font-weight': 700 }],
]

動態規則

為了使其更智慧，請將匹配器更改為 RegExp，並將主體更改為函式

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

主體函式的第一個參數是 RegExp 匹配結果，可以解構以取得匹配的群組。

例如，以下列用法

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

將會產生相對應的 CSS

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

恭喜！現在您已擁有自己的強大原子 CSS 工具。好好享受吧！

CSS 規則回退

如果您希望利用 CSS 規則回退來使用新的 CSS 功能，同時又能回退以支援舊瀏覽器，您可以選擇性地傳回一個二維陣列作為具有相同鍵的規則的 CSS 表示形式。例如

rules: [
  [/^w-(\d+)dvh$/, ([_, d]) => {
    return [
      ['width', `${d}vh`],
      ['width', `${d}dvh`],
    ]
  }],
]

這將使 w-100dvh 產生

.w-100dvh { width: 100vh; width: 100dvh; }

排序

UnoCSS 遵循您在生成的 CSS 中定義的規則順序。後面的規則具有更高的優先順序。

使用動態規則時，它可能匹配多個標記。預設情況下，在單個動態規則下匹配的輸出將在組內按字母順序排序。

規則合併

預設情況下，UnoCSS 會合併具有相同主體的 CSS 規則，以盡量減少 CSS 大小。

例如，<div class="m-2 hover:m2"> 將產生

.hover\:m2:hover, .m-2 { margin: 0.5rem; }

而不是兩個單獨的規則

.hover\:m2:hover { margin: 0.5rem; }
.m-2 { margin: 0.5rem; }

特殊符號

自 v0.61 起，UnoCSS 支援特殊符號來定義生成的 CSS 的額外中繼資訊。您可以從動態規則匹配器函式的第二個參數存取符號。

例如

rules: [
  [/^grid$/, ([, d], { symbols }) => {
    return {
      [symbols.parent]: '@supports (display: grid)',
      display: 'grid',
    }
  }],
]

將產生

@supports (display: grid) {
  .grid {
    display: grid;
  }
}

可用符號

• symbols.parent：生成的 CSS 規則的父包裝器（例如 @supports、@media 等）
• symbols.selector：修改生成的 CSS 規則選擇器的函式（請參閱下面的範例）
• symbols.layer：設定生成的 CSS 規則的 UnoCSS 層級的字串/函式/正則表達式匹配
• `symbols.variants`：套用至目前 CSS 物件的變體處理常式陣列
• `symbols.shortcutsNoMerge`：一個布林值，用於停用捷徑中目前規則的合併

多選擇器規則

自 v0.61 起，UnoCSS 支援透過 JavaScript Generator 函式 使用多選擇器。

例如

rules: [
  [/^button-(.*)$/, function* ([, color], { symbols }) {
    yield {
      background: color
    }
    yield {
      [symbols.selector]: selector => `${selector}:hover`,
      // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
      background: `color-mix(in srgb, ${color} 90%, black)`
    }
  }],
]

將產生多個 CSS 規則

.button-red {
  background: red;
}
.button-red:hover {
  background: color-mix(in srgb, red 90%, black);
}

完全控制的規則

提示

這是一個進階功能，在大多數情況下不需要使用。

當您確實需要一些進階規則，而這些規則無法透過 動態規則 和 變體 的組合來涵蓋時，UnoCSS 也提供了一種方法讓您可以完全控制 CSS 的生成。

它允許您從動態規則的主體函式傳回一個字串，該字串將**直接**傳遞到生成的 CSS（這也意味著您需要處理 CSS 轉義、變體套用、CSS 構建等事項）。

uno.config.ts

import { defineConfig, toEscapedSelector as e } from 'unocss'

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // discard mismatched rules
      if (name.includes('something'))
        return

      // if you want, you can disable the variants for this rule
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // return a string instead of an object
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* you can have multiple rules */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* or media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})