Layers

Thứ tự của CSS sẽ ảnh hưởng đến ưu tiên của chúng. Mặc dù công cụ sẽ giữ lại thứ tự của các quy tắc, đôi khi bạn có thể muốn nhóm một số tiện ích để có kiểm soát rõ ràng về thứ tự của chúng.

Sử dụng

Không giống như Tailwind CSS cung cấp ba layer cố định (base, components, utilities), UnoCSS cho phép bạn định nghĩa các layer như bạn muốn. Để đặt layer, bạn có thể truyền siêu dữ liệu như mục thứ ba của quy tắc của bạn:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // khi bạn bỏ qua layer, nó sẽ là `default`
  ['btn', { padding: '4px' }],
]

Điều này sẽ tạo ra:

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

Layer cũng có thể được đặt trên mỗi preflight:

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

Thứ tự

Bạn có thể kiểm soát thứ tự của các layer bằng:

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

Các layer không có thứ tự được chỉ định sẽ được sắp xếp theo thứ tự bảng chữ cái.

Khi bạn muốn có CSS tùy chỉnh của mình giữa các layer, bạn có thể cập nhật module đầu vào của mình:

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

// các layer không phải là 'components' và 'utilities' sẽ fallback ở đây
import 'uno.css'

// CSS riêng của bạn
import './my-custom.css'

// layer "utilities" sẽ có ưu tiên cao nhất
import 'uno:utilities.css'

CSS Cascade Layers

Bạn có thể xuất CSS Cascade Layers bằng:

outputToCssLayers: true

Bạn có thể thay đổi tên CSS Layer bằng:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // Layer mặc định sẽ được xuất vào CSS layer "utilities".
    if (layer === 'default')
      return 'utilities'

    // Layer shortcuts sẽ được xuất vào layer con "shortcuts" của CSS layer "utilities".
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // Tất cả các layer khác sẽ chỉ sử dụng tên của chúng như tên CSS layer.
  }
}

Layers sử dụng biến thể

Các layer có thể được tạo bằng cách sử dụng các biến thể.

uno-layer-<name>: có thể được sử dụng để tạo một layer 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>: có thể được sử dụng để tạo một 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; } }