UnoCSS란 무엇인가요?

UnoCSS는 유연하고 확장 가능하도록 설계된 즉시 원자 CSS 엔진입니다. 핵심은 의견이 없으며 모든 CSS 유틸리티는 preset을 통해 제공됩니다.

예를 들어, 로컬 설정 파일에서 규칙을 제공하여 사용자 정의 CSS 유틸리티를 정의할 수 있습니다.

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; }

더 유연하게 만들기 위해 규칙의 첫 번째 인수(매처라고 부름)를 RegExp로 변경하고 본문을 함수로 변경하여 규칙을 동적으로 만들 수 있습니다:

diff

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

이렇게 하면 m-1, m-100 또는 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; }

Presets

몇 가지 규칙을 만들면 preset으로 추출하여 다른 사람과 공유할 수 있습니다. 예를 들어, 회사의 디자인 시스템을 위한 preset을 만들고 팀과 공유할 수 있습니다.

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, // your own preset
  ],
})