Layers

CSS의 순서는 우선순위에 영향을 미칩니다. 엔진이 규칙의 순서를 유지하지만, 때로는 일부 유틸리티를 그룹화하여 순서를 명시적으로 제어하고 싶을 수 있습니다.

사용법

세 개의 고정된 레이어(base, components, utilities)를 제공하는 Tailwind CSS와 달리, UnoCSS는 원하는 대로 레이어를 정의할 수 있습니다. 레이어를 설정하려면 규칙의 세 번째 항목으로 메타데이터를 전달할 수 있습니다:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // when you omit the layer, it will be `default`
  ['btn', { padding: '4px' }],
]

이것은 다음을 생성합니다:

/* layer: default */
.btn { padding: 4px; }
/* layer: utilities */
.m-2 { margin: 0.5rem; }

레이어는 각 preflight에서도 설정할 수 있습니다:

preflights: [
  {
    layer: 'my-layer',
    getCSS: async () => (await fetch('my-style.css')).text(),
  },
]

순서 지정

다음과 같이 레이어의 순서를 제어할 수 있습니다:

layers: {
  'components': -1,
  'default': 1,
  'utilities': 2,
  'my-layer': 3,
}

순서가 지정되지 않은 레이어는 알파벳 순으로 정렬됩니다.

레이어 사이에 사용자 정의 CSS를 원할 때는 진입점 모듈을 업데이트할 수 있습니다:

// 'uno:[layer-name].css'
import 'uno:components.css'

// layers that are not 'components' and 'utilities' will fallback to here
import 'uno.css'

// your own CSS
import './my-custom.css'

// "utilities" layer will have the highest priority
import 'uno:utilities.css'

CSS Cascade Layers

다음과 같이 CSS Cascade Layers를 출력할 수 있습니다:

outputToCssLayers: true

다음과 같이 CSS Layer 이름을 변경할 수 있습니다:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // The default layer will be output to the "utilities" CSS layer.
    if (layer === 'default')
      return 'utilities'

    // The shortcuts layer will be output to the "shortcuts" sublayer the of "utilities" CSS layer.
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // All other layers will just use their name as the CSS layer name.
  }
}

Variant를 사용한 레이어

레이어는 variant를 사용하여 생성할 수 있습니다.

uno-layer-<name>:을 사용하여 UnoCSS 레이어를 생성할 수 있습니다.

<p class="uno-layer-my-layer:text-xl">text</p>

/* layer: my-layer */
.uno-layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; }

layer-<name>:을 사용하여 CSS @layer를 생성할 수 있습니다.

<p class="layer-my-layer:text-xl">text</p>

/* layer: default */
@layer my-layer{ .layer-my-layer\:text-xl{ font-size:1.25rem; line-height:1.75rem; } }