Rules

규칙은 유틸리티 클래스와 결과 CSS를 정의합니다. UnoCSS에는 많은 내장 규칙이 있지만 사용자 정의 규칙을 쉽게 추가할 수도 있습니다.

정적 규칙

이 예제를 사용하면:

rules: [
  ['m-1', { margin: '0.25rem' }],
]

사용자의 코드베이스에서 m-1이 감지될 때마다 다음 CSS가 생성됩니다:

.m-1 { margin: 0.25rem; }

참고: 본문 구문은 CSS 속성 구문을 따릅니다. 예: fontWeight 대신 font-weight. 속성 이름에 하이픈 -이 있으면 따옴표로 묶어야 합니다.

rules: [
  ['font-bold', { 'font-weight': 700 }],
]

동적 규칙

더 스마트하게 만들려면 매처를 RegExp로 변경하고 본문을 함수로 변경하세요:

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

본문 함수의 첫 번째 인수는 구조 분해 할당을 통해 매칭된 그룹을 얻을 수 있는 RegExp 매치 결과입니다.

예를 들어, 다음 사용법으로:

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

해당하는 CSS가 생성됩니다:

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

축하합니다! 이제 여러분만의 강력한 원자 CSS 유틸리티를 갖게 되었습니다. 즐겨보세요!

CSS 규칙 폴백

새로운 CSS 기능을 사용하면서도 오래된 브라우저를 지원하기 위해 CSS 규칙 폴백을 활용하고 싶은 경우, 동일한 키를 가진 규칙에 대해 CSS 표현으로 2D 배열을 선택적으로 반환할 수 있습니다. 예를 들어:

rules: [
  [/^h-(\d+)dvh$/, ([_, d]) => {
    return [
      ['height', `${d}vh`],
      ['height', `${d}dvh`],
    ]
  }],
]

이것은 h-100dvh가 다음을 생성하게 합니다:

.h-100dvh { height: 100vh; height: 100dvh; }

순서 지정

UnoCSS는 생성된 CSS에서 정의한 규칙의 순서를 존중합니다. 나중에 오는 것들이 더 높은 우선순위를 가집니다.

동적 규칙을 사용할 때 여러 토큰과 매칭될 수 있습니다. 기본적으로 단일 동적 규칙 아래에서 매칭된 것들의 출력은 그룹 내에서 알파벳 순으로 정렬됩니다.

규칙 병합

기본적으로 UnoCSS는 CSS 크기를 최소화하기 위해 동일한 본문을 가진 CSS 규칙을 병합합니다.

예를 들어, <div class="m-2 hover:m2">는 다음을 생성합니다:

.hover\:m2:hover,
.m-2 {
  margin: 0.5rem;
}

두 개의 별도 규칙 대신:

.hover\:m2:hover {
  margin: 0.5rem;
}
.m-2 {
  margin: 0.5rem;
}

특수 기호

v0.61부터 UnoCSS는 생성된 CSS에 대한 추가 메타 정보를 정의하기 위한 특수 기호를 지원합니다. 동적 규칙 매처 함수의 두 번째 인수에서 기호에 접근할 수 있습니다.

예를 들어:

rules: [
  [/^grid$/, ([, d], { symbols }) => {
    return {
      [symbols.parent]: '@supports (display: grid)',
      display: 'grid',
    }
  }],
]

다음을 생성합니다:

@supports (display: grid) {
  .grid {
    display: grid;
  }
}

사용 가능한 기호

• symbols.parent: 생성된 CSS 규칙의 부모 래퍼 (예: @supports, @media 등)
• symbols.selector: 생성된 CSS 규칙의 선택자를 수정하는 함수 (아래 예제 참조)
• symbols.layer: 생성된 CSS 규칙의 UnoCSS 레이어를 설정하는 문자열/함수/regex 매치
• symbols.variants: 현재 CSS 객체에 적용되는 variant 핸들러 배열
• symbols.shortcutsNoMerge: 단축키에서 현재 규칙의 병합을 비활성화하는 불린
• symbols.noMerge: 단축키에서 현재 규칙의 병합을 비활성화하는 불린
• symbols.sort: 현재 CSS 객체의 정렬 순서를 덮어쓰는 숫자

다중 선택자 규칙

v0.61부터 UnoCSS는 JavaScript Generator 함수를 통한 다중 선택자를 지원합니다.

예를 들어:

rules: [
  [/^button-(.*)$/, function* ([, color], { symbols }) {
    yield {
      background: color
    }
    yield {
      [symbols.selector]: selector => `${selector}:hover`,
      // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
      background: `color-mix(in srgb, ${color} 90%, black)`
    }
  }],
]

여러 CSS 규칙을 생성합니다:

.button-red {
  background: red;
}
.button-red:hover {
  background: color-mix(in srgb, red 90%, black);
}

완전히 제어되는 규칙

TIP

이는 고급 기능이며, 대부분의 상황에서는 필요하지 않습니다.

동적 규칙과 Variants의 조합으로 다루지 않는 고급 규칙이 정말 필요할 때, UnoCSS는 CSS 생성을 완전히 제어할 수 있는 방법도 제공합니다.

동적 규칙의 본문 함수에서 문자열을 반환할 수 있으며, 이는 생성된 CSS에 직접 전달됩니다 (이는 CSS 이스케이핑, variant 적용, CSS 구성 등을 직접 처리해야 함을 의미합니다).

import { defineConfig, toEscapedSelector as e } from 'unocss'

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // discard mismatched rules
      if (name.includes('something'))
        return

      // if you want, you can disable the variants for this rule
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // return a string instead of an object
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* you can have multiple rules */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* or media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})