UnoCSS คืออะไร?

UnoCSS เป็นเครื่องยนต์ atomic CSS แบบทันที ที่ออกแบบมาเพื่อความยืดหยุ่นและขยายได้ ตัว core ไม่มีความเห็นและ utilities CSS ทั้งหมดจัดหาให้ผ่าน presets

ตัวอย่างเช่น คุณสามารถกำหนด utilities CSS แบบกำหนดเองของคุณ โดยการจัดหา rules ใน ไฟล์ config ของคุณ

import { defineConfig } from 'unocss'

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

นี่จะเพิ่ม utility m-1 ใหม่ให้กับโปรเจกต์ของคุณ เนื่องจาก UnoCSS เป็นแบบ on-demand มันจะไม่ทำอะไรจนกว่าคุณจะใช้มันใน codebase ของคุณ ดังนั้นสมมติว่าเรามีคอมโพเนนต์แบบนี้:

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

m-1 จะถูกตรวจพบและ CSS ต่อไปนี้จะถูกสร้างขึ้น:

.m-1 { margin: 1px; }

เพื่อให้ยืดหยุ่นมากขึ้น คุณสามารถทำให้ rule ของคุณเป็นแบบไดนามิกโดยการเปลี่ยน argument แรกใน rule (เราเรียกว่า matcher) เป็น RegExp และ body เป็นฟังก์ชัน ตัวอย่างเช่น:

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

ด้วยการทำเช่นนี้ ตอนนี้คุณสามารถมี utilities margin แบบกำหนดเองได้ เช่น m-1, m-100 หรือ m-52.43 และอีกครั้ง UnoCSS จะสร้างมันเมื่อใดก็ตามที่คุณใช้มัน

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

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

Presets

เมื่อคุณสร้าง rules ไม่กี่ตัวแล้ว คุณสามารถแยกออกมาเป็น preset และแบ่งปันกับผู้อื่นได้ ตัวอย่างเช่น คุณสามารถสร้าง preset สำหรับ design system ของบริษัทคุณ และแบ่งปันกับทีมของคุณ

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 ของคุณเอง
  ],
})

ดังนั้นในลักษณะเดียวกัน เราได้จัดหา official presets ไม่กี่ตัวสำหรับคุณเพื่อเริ่มใช้งานทันที และคุณยังสามารถหา community presets ที่น่าสนใจอีกมากมาย

ลองเล่น

คุณสามารถลอง UnoCSS ในเบราว์เซอร์ของคุณ ใน Playground หรือค้นหา utilities จาก default presets ใน Interactive Docs

การผสานรวม

UnoCSS มาพร้อมกับการผสานรวมสำหรับเฟรมเวิร์ก/เครื่องมือต่างๆ:

ตัวอย่าง

ซอร์สโค้ดสำหรับตัวอย่างทั้งหมดสามารถพบได้ในไดเรกทอรี /examples