Quy tắc

Quy tắc định nghĩa các lớp tiện ích và CSS kết quả. UnoCSS có nhiều quy tắc tích hợp sẵn nhưng cũng cho phép dễ dàng thêm các quy tắc tùy chỉnh.

Quy tắc tĩnh

Ví dụ này:

rules: [
  ['m-1', { margin: '0.25rem' }],
]

CSS sau đây sẽ được tạo bất cứ khi nào m-1 được phát hiện trong cơ sở mã của người dùng:

.m-1 { margin: 0.25rem; }

Lưu ý: Cú pháp phần thân tuân theo cú pháp thuộc tính CSS, ví dụ: font-weight thay vì fontWeight. Nếu có dấu gạch nối - trong tên thuộc tính, nó nên được đặt trong dấu ngoặc kép.

rules: [
  ['font-bold', { 'font-weight': 700 }],
]

Quy tắc động

Để làm cho nó thông minh hơn, thay đổi matcher thành một RegExp và phần thân thành một hàm:

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

Tham số đầu tiên của hàm phần thân là kết quả khớp RegExp có thể được giải cấu trúc để lấy các nhóm khớp.

Ví dụ, với cách sử dụng sau đây:

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

CSS tương ứng sẽ được tạo:

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

Xin chúc mừng! Bây giờ bạn đã có các tiện ích CSS nguyên tử mạnh mẽ riêng của mình. Thưởng thức nào!

Fallback quy tắc CSS

Trong trường hợp bạn có thể muốn tận dụng fallback quy tắc CSS để sử dụng các tính năng CSS mới đồng thời cũng có thể fallback để hỗ trợ các trình duyệt cũ, bạn có thể tùy chọn trả về một mảng 2D làm biểu diễn CSS cho các quy tắc có cùng khóa. Ví dụ:

rules: [
  [/^h-(\d+)dvh$/, ([_, d]) => {
    return [
      ['height', `${d}vh`],
      ['height', `${d}dvh`],
    ]
  }],
]

Điều này sẽ làm cho h-100dvh tạo ra:

.h-100dvh { height: 100vh; height: 100dvh; }

Thứ tự

UnoCSS tôn trọng thứ tự của các quy tắc bạn đã định nghĩa trong CSS được tạo. Những cái sau có ưu tiên cao hơn.

Khi sử dụng các quy tắc động, nó có thể khớp với nhiều token. Theo mặc định, đầu ra của những cái khớp trong một quy tắc động đơn lẻ sẽ được sắp xếp theo thứ tự bảng chữ cái trong nhóm.

Hợp nhất quy tắc

Theo mặc định, UnoCSS sẽ hợp nhất các quy tắc CSS có cùng phần thân để giảm kích thước CSS.

Ví dụ, <div class="m-2 hover:m2"> sẽ tạo ra:

.hover\:m2:hover,
.m-2 {
  margin: 0.5rem;
}

Thay vì hai quy tắc riêng lẻ:

.hover\:m2:hover {
  margin: 0.5rem;
}
.m-2 {
  margin: 0.5rem;
}

Ký hiệu đặc biệt

Kể từ v0.61, UnoCSS hỗ trợ các ký hiệu đặc biệt để định nghĩa thông tin siêu dữ liệu bổ sung cho CSS được tạo của bạn. Bạn có thể truy cập các ký hiệu từ tham số thứ hai của hàm matcher quy tắc động.

Ví dụ:

rules: [
  [/^grid$/, ([, d], { symbols }) => {
    return {
      [symbols.parent]: '@supports (display: grid)',
      display: 'grid',
    }
  }],
]

Sẽ tạo ra:

@supports (display: grid) {
  .grid {
    display: grid;
  }
}

Các ký hiệu có sẵn

• symbols.parent: Bao bọc cha của quy tắc CSS được tạo (ví dụ: @supports, @media, v.v.)
• symbols.selector: Một hàm để sửa đổi bộ chọn của quy tắc CSS được tạo (xem ví dụ dưới đây)
• symbols.layer: Một chuỗi/hàm/biểu thức chính quy khớp đặt layer UnoCSS của quy tắc CSS được tạo
• symbols.variants: Một mảng xử lý biến thể được áp dụng cho đối tượng CSS hiện tại
• symbols.shortcutsNoMerge: Một boolean để vô hiệu hóa việc hợp nhất quy tắc hiện tại trong các phím tắt
• symbols.noMerge: Một boolean để vô hiệu hóa việc hợp nhất quy tắc hiện tại trong các phím tắt
• symbols.sort: Một số để ghi đè thứ tự sắp xếp của đối tượng CSS hiện tại

Quy tắc nhiều bộ chọn

Kể từ v0.61, UnoCSS hỗ trợ nhiều bộ chọn thông qua Các hàm Generator JavaScript.

Ví dụ:

rules: [
  [/^button-(.*)$/, function* ([, color], { symbols }) {
    yield {
      background: color
    }
    yield {
      [symbols.selector]: selector => `${selector}:hover`,
      // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
      background: `color-mix(in srgb, ${color} 90%, black)`
    }
  }],
]

Sẽ tạo nhiều quy tắc CSS:

.button-red {
  background: red;
}
.button-red:hover {
  background: color-mix(in srgb, red 90%, black);
}

Quy tắc được kiểm soát hoàn toàn

TIP

Đây là một tính năng nâng cao, trong hầu hết các trường hợp nó sẽ không cần thiết.

Khi bạn thực sự cần một số quy tắc nâng cao không được bao phủ bởi sự kết hợp của Quy tắc động và Biến thể, UnoCSS cũng cung cấp một cách để cung cấp cho bạn toàn quyền kiểm soát để tạo CSS.

Nó cho phép bạn trả về một chuỗi từ hàm phần thân của quy tắc động sẽ được trực tiếp truyền vào CSS được tạo (điều này cũng có nghĩa là bạn cần phải chăm sóc những thứ như thoát CSS, áp dụng biến thể, xây dựng CSS, v.v.).

import { defineConfig, toEscapedSelector as e } from 'unocss'

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // loại bỏ các quy tắc không khớp
      if (name.includes('something'))
        return

      // nếu bạn muốn, bạn có thể vô hiệu hóa các biến thể cho quy tắc này
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // trả về một chuỗi thay vì một đối tượng
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* bạn có thể có nhiều quy tắc */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* hoặc các truy vấn media */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})