Layers

ลำดับของ CSS จะส่งผลต่อความสำคัญของพวกเขา ในขณะที่ engine จะรักษาลำดับของกฎ บางครั้งคุณอาจต้องการจัดกลุ่ม utilities บางอย่างเพื่อควบคุมลำดับของพวกเขาอย่างชัดเจน

การใช้งาน

ไม่เหมือนกับ Tailwind CSS ที่มี layers คงที่สามอัน (base, components, utilities) UnoCSS อนุญาตให้คุณกำหนด layers ตามที่ต้องการ เพื่อตั้งค่า layer คุณสามารถส่ง metadata เป็นรายการที่สามของกฎของคุณ:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // เมื่อคุณไม่ระบุ layer จะเป็น `default`
  ['btn', { padding: '4px' }],
]

นี่จะสร้าง:

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

Layer ยังสามารถตั้งค่าได้ในแต่ละ preflight:

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

การจัดลำดับ

คุณสามารถควบคุมลำดับของ layers ได้โดย:

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

Layers ที่ไม่มีการระบุลำดับจะถูกเรียงตามตัวอักษร

เมื่อคุณต้องการให้ CSS ที่กำหนดเองอยู่ระหว่าง layers คุณสามารถอัปเดต entry module ของคุณ:

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

// layers ที่ไม่ใช่ 'components' และ 'utilities' จะ fallback มาที่นี่
import 'uno.css'

// CSS ของคุณเอง
import './my-custom.css'

// layer "utilities" จะมีความสำคัญสูงสุด
import 'uno:utilities.css'

CSS Cascade Layers

คุณสามารถส่งออก CSS Cascade Layers ได้โดย:

outputToCssLayers: true

คุณสามารถเปลี่ยนชื่อ CSS Layer ได้ด้วย:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // layer เริ่มต้นจะถูกส่งออกไปยัง CSS layer "utilities"
    if (layer === 'default')
      return 'utilities'

    // layer shortcuts จะถูกส่งออกไปยัง sublayer "shortcuts" ของ CSS layer "utilities"
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // layers อื่นๆ ทั้งหมดจะใช้ชื่อของพวกเขาเป็นชื่อ CSS layer
  }
}

Layers โดยใช้ variants

Layers สามารถสร้างได้โดยใช้ variants

uno-layer-<name>: สามารถใช้เพื่อสร้าง UnoCSS layer

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