Straturi

Ordinea CSS-ului va afecta prioritățile lor. Deși motorul păstrează ordinea regulilor, uneori poate doriți să grupați unele utilități pentru a avea control explicit asupra ordinii lor.

Utilizare

Spre deosebire de Tailwind CSS care oferă trei straturi fixe (base, components, utilities), UnoCSS vă permite să definiți straturile după cum doriți. Pentru a seta stratul, puteți trece metadatele ca al treilea element al regulilor dvs.:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // când omiteți stratul, va fi `default`
  ['btn', { padding: '4px' }],
]

Aceasta va genera:

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

Stratul poate fi setat și pe fiecare preflight:

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

Ordonare

Puteți controla ordinea straturilor prin:

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

Straturile fără ordine specificată vor fi sortate alfabetic.

Când doriți să aveți CSS-ul personalizat între straturi, puteți actualiza modulul de intrare:

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

// straturile care nu sunt 'components' și 'utilities' vor reveni aici
import 'uno.css'

// propriul CSS
import './my-custom.css'

// stratul "utilities" va avea cea mai mare prioritate
import 'uno:utilities.css'

Cascade Layers CSS

Puteți genera Cascade Layers CSS prin:

outputToCssLayers: true

Puteți schimba numele straturilor CSS cu:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // Stratul implicit va fi generat în stratul CSS "utilities".
    if (layer === 'default')
      return 'utilities'

    // Stratul shortcuts va fi generat în substratul "shortcuts" al stratului CSS "utilities".
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Toate celelalte straturi vor folosi doar numele lor ca nume de strat CSS.
  }
}

Straturi folosind variante

Straturile pot fi create folosind variante.

uno-layer-<name>: poate fi folosit pentru a crea un strat 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>: poate fi folosit pentru a crea un @layer CSS.

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