為什麼選擇UnoCSS?

UnoCSS是即時原子CSS引擎，設計為靈活和可擴展。核心是不固執己見的，所有CSS實用程序都是通過預設提供的。

例如，您可以通過在本地提供規則來定義自定義CSS實用程序 config file.

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

這將為您的項目添加一個新的CSS m-1。由於UnoCSS是按需的，除非你在代碼庫中使用它，否則它不會做任何事情。假設我們有這樣一個組件：

html

<div class="m-1">Hello</div>

m-1 將被檢測到，並將生成以下CSS:

css

.m-1 { margin: 1px; }

為了使其更靈活，您可以將規則的第一個參數（我們稱之為matcher）更改為“RegExp”，並將主體更改為函數，從而使規則具有動態性，例如：

diff

// uno.config.ts
export default defineConfig({
  rules: [
-    ['m-1', { margin: '1px' }],
+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
  ],
})

通過這樣做，現在您可以擁有任意的保證金實用程序, like m-1, m-100 or m-52.43. 同樣，UnoCSS只會在您使用它們時生成它們。

html

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

css

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

預設

一旦你制定了一些規則，你就可以將它們提取到一個預設中，並與他人共享。例如，您可以為公司的設計系統創建預設，並與團隊共享。

// my-preset.ts
import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([\.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [/* ... */],
  shortcuts: [/* ... */],
  // ...
}

// uno.config.ts
import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // your own preset
  ],
})