為什麼選擇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
  ],
})

So similarly, we provided a few official presets for you to start using right away, and you can also find many interesting community presets.

演示

你可以在瀏覽器中嘗試UnoCSS, in the Playground. Or look up utilities from the default presets in the Interactive Docs.

Integrations

UnoCSS集成了各種框架/工具：

Examples

所有示例的源代碼都可以在中找到/examples directory.

為什麼選擇UnoCSS? ​

預設 ​

演示 ​

Integrations ​

Examples ​

為什麼選擇UnoCSS?

預設

演示

Integrations

Examples