規則

規則定義了UnoCSS為代碼庫搜索和生成CSS的方式。

靜態規則

比如:

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

每當在代碼庫中檢測到m-1時，將生成以下CSS：

.m-1 { margin: 0.25rem; }

動態規則

要使其更智能，請將matcher更改為RegExp，將body更改為函數：

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實用程序。享受

完全匹配規則

WARNING

這是一個高級功能，在大多數情況下都不需要它。

當您確實需要一些 Dynamic Rules and Variants組合無法覆蓋的高級規則時, UnoCSS還提供了一種方法，可以讓您完全控制CSS的生成。

通過從動態規則的主體函數返回一個string，它將直接傳遞給生成的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};
  }
}
`
    }],
  ],
})

排序

UnoCSS尊重您在生成的CSS中定義的規則的順序。後者具有更高的優先級。 當使用動態規則時，它可能會匹配多個令牌。默認情況下，在單個動態規則下匹配的輸出將在組中按字母順序排序。

規則合併

默認情況下，UnoCSS會將CSS規則與相同的主體合併，以最小化CSS大小。

比如, <div class="m-2 hover:m2"> will generate:

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

而不是兩個單獨的規則：

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