Слои

Порядок CSS влияет на их приоритеты. Хотя движок сохраняет порядок правил, иногда вы можете захотеть сгруппировать некоторые утилиты для явного контроля их порядка.

Использование

В отличие от Tailwind CSS, который предлагает три фиксированных слоя (base, components, utilities), UnoCSS позволяет определять слои по вашему усмотрению. Чтобы установить слой, вы можете передать метаданные в качестве третьего элемента ваших правил:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // когда вы опускаете слой, он будет `default`
  ['btn', { padding: '4px' }],
]

Это сгенерирует:

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

Слой также может быть установлен для каждого префлайта:

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'

// слои, не являющиеся 'components' и 'utilities', будут возвращаться сюда
import 'uno.css'

// ваш собственный CSS
import './my-custom.css'

// слой "utilities" будет иметь самый высокий приоритет
import 'uno:utilities.css'

CSS Cascade Layers

Вы можете вывести CSS Cascade Layers с помощью:

outputToCssLayers: true

Вы можете изменить имена CSS-слоев с помощью:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // Слой по умолчанию будет выведен в CSS-слой "utilities".
    if (layer === 'default')
      return 'utilities'

    // Слой сокращений будет выведен в подслой "shortcuts" CSS-слоя "utilities".
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Все остальные слои будут использовать свое имя в качестве имени CSS-слоя.
  }
}

Слои с использованием вариантов

Слои могут быть созданы с использованием вариантов.

uno-layer-<n>: может использоваться для создания слоя 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-<n>: может использоваться для создания 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; } }