UnoCSS là gì?

UnoCSS là công cụ tạo CSS nguyên tử tức thì, được thiết kế để linh hoạt và mở rộng. Cốt lõi không có ý kiến và tất cả các tiện ích CSS được cung cấp thông qua các preset.

Ví dụ, bạn có thể định nghĩa các tiện ích CSS tùy chỉnh của mình bằng cách cung cấp các quy tắc trong tệp cấu hình cục bộ của bạn.

import { defineConfig } from 'unocss'

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

Điều này sẽ thêm một tiện ích CSS mới m-1 vào dự án của bạn. Vì UnoCSS hoạt động theo yêu cầu, nó sẽ không làm gì cho đến khi bạn sử dụng nó trong cơ sở mã của mình. Vì vậy, giả sử chúng ta có một component như thế này:

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

m-1 sẽ được phát hiện và CSS sau đây sẽ được tạo:

.m-1 { margin: 1px; }

Để làm cho nó linh hoạt hơn, bạn có thể làm cho quy tắc của mình động bằng cách thay đổi tham số đầu tiên trên quy tắc (chúng ta gọi nó là matcher) thành một RegExp, và phần thân thành một hàm, ví dụ:

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

Bằng cách làm này, bây giờ bạn có thể có các tiện ích lề tùy ý, như m-1, m-100 hoặc m-52.43. Và một lần nữa, UnoCSS chỉ tạo chúng bất cứ khi nào bạn sử dụng chúng.

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

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

Presets

Khi bạn đã tạo một vài quy tắc, bạn có thể trích xuất chúng vào một preset và chia sẻ nó với những người khác. Ví dụ, bạn có thể tạo một preset cho hệ thống thiết kế của công ty bạn và chia sẻ nó với nhóm của bạn.

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: [/* ... */],
  // ...
}

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

export default defineConfig({
  presets: [
    myPreset, // preset riêng của bạn
  ],
})

Vì vậy, tương tự, chúng tôi cung cấp một vài preset chính thức để bạn bắt đầu sử dụng ngay lập tức, và bạn cũng có thể tìm thấy nhiều preset cộng đồng thú vị.

Thử nghiệm

Bạn có thể thử UnoCSS trong trình duyệt của mình, trong Playground. Hoặc tra cứu các tiện ích từ các preset mặc định trong Tài liệu tương tác.

Tích hợp

UnoCSS đi kèm với các tích hợp cho nhiều framework / công cụ khác nhau:

Ví dụ

Mã nguồn cho tất cả các ví dụ có thể được tìm thấy trong thư mục /examples.