Rules

Rules กำหนดคลาส utility และ CSS ที่ได้ มันง่ายมากที่จะเพิ่มกฎแบบกำหนดเอง

กฎแบบ static

ด้วยตัวอย่างนี้:

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

CSS ต่อไปนี้จะถูกสร้างเมื่อ m-1 ถูกตรวจพบใน codebase ของผู้ใช้:

.m-1 { margin: 0.25rem; }

หมายเหตุ: ไวยากรณ์ body เป็นไปตามไวยากรณ์ CSS property เช่น font-weight แทน fontWeight หากมี hyphen - ในชื่อ property ควรใส่เครื่องหมายคำพูด

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

กฎแบบ dynamic

เพื่อให้ฉลาดขึ้น เปลี่ยน matcher เป็น RegExp และ body เป็นฟังก์ชัน:

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

อาร์กิวเมนต์แรกของฟังก์ชัน body คือผลลัพธ์การจับคู่ RegExp ที่สามารถ destructured เพื่อรับกลุ่มที่จับคู่ได้

ตัวอย่างเช่น ด้วยการใช้งานต่อไปนี้:

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

CSS ที่สอดคล้องกันจะถูกสร้าง:

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

ยินดีด้วย! ตอนนี้คุณมี utilities CSS แบบ atomic ที่ทรงพลังของคุณเองแล้ว สนุกกับมัน!

CSS Rules Fallback

ในกรณีที่คุณอาจต้องการใช้ CSS rules fallback เพื่อใช้ฟีเจอร์ CSS ใหม่ในขณะที่ยังสามารถ fallback เพื่อสนับสนุนเบราว์เซอร์เก่าได้ คุณสามารถเลือกส่งคืน 2D-array เป็นการแสดง CSS สำหรับกฎที่มี keys เดียวกัน ตัวอย่างเช่น:

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

ซึ่งจะทำให้ h-100dvh สร้าง:

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

การเรียงลำดับ

UnoCSS เคารพลำดับของกฎที่คุณกำหนดใน CSS ที่สร้างขึ้น อันที่มาทีหลังมีลำดับความสำคัญสูงกว่า

เมื่อใช้กฎแบบ dynamic มันอาจจับคู่หลาย tokens โดยค่าเริ่มต้น เอาต์พุตของกฎ dynamic เดียวที่จับคู่จะถูกจัดเรียงตามตัวอักษรภายในกลุ่ม

การรวมกฎ

โดยค่าเริ่มต้น UnoCSS จะรวม CSS rules ที่มี body เดียวกันเพื่อลดขนาด CSS

ตัวอย่างเช่น <div class="m-2 hover:m2"> จะสร้าง:

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

แทนที่จะเป็นกฎแยกสองกฎ:

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

สัญลักษณ์พิเศษ

ตั้งแต่ v0.61 UnoCSS รองรับสัญลักษณ์พิเศษเพื่อกำหนดข้อมูล meta เพิ่มเติมสำหรับ CSS ที่สร้างขึ้น คุณสามารถเข้าถึงสัญลักษณ์จากอาร์กิวเมนต์ที่สองของฟังก์ชัน matcher กฎแบบ dynamic

ตัวอย่างเช่น:

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

จะสร้าง:

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

สัญลักษณ์ที่มีอยู่

• symbols.parent: ตัวห่อ parent ของ CSS rule ที่สร้างขึ้น (เช่น @supports, @media, ฯลฯ)
• symbols.selector: ฟังก์ชันเพื่อแก้ไข selector ของ CSS rule ที่สร้างขึ้น (ดูตัวอย่างด้านล่าง)
• symbols.layer: สตริง/ฟังก์ชัน/regex match ที่ตั้งค่าเลเยอร์ UnoCSS ของ CSS rule ที่สร้างขึ้น
• symbols.variants: อาร์เรย์ของ variant handler ที่ถูกนำไปใช้กับ CSS object ปัจจุบัน
• symbols.shortcutsNoMerge: บูลีนเพื่อปิดใช้งานการรวมของกฎปัจจุบันใน shortcuts
• symbols.noMerge: บูลีนเพื่อปิดใช้งานการรวมของกฎปัจจุบันใน shortcuts
• symbols.sort: ตัวเลขเพื่อเขียนทับลำดับการจัดเรียงของ CSS object ปัจจุบัน

กฎ multi-selector

ตั้งแต่ v0.61 UnoCSS รองรับ multi-selector ผ่าน JavaScript Generator functions

ตัวอย่างเช่น:

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)`
    }
  }],
]

จะสร้างหลาย CSS rules:

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

กฎแบบควบคุมเต็มรูปแบบ

TIP

นี่เป็นฟีเจอร์ขั้นสูง ในกรณีส่วนใหญ่จะไม่จำเป็น

เมื่อคุณต้องการกฎขั้นสูงบางอย่างที่ไม่ครอบคลุมโดยการรวมกันระหว่าง Dynamic Rules และ Variants UnoCSS ยังจัดหาวิธีให้คุณควบคุมการสร้าง CSS ได้เต็มรูปแบบ

มันอนุญาตให้คุณส่งคืนสตริงจากฟังก์ชัน body ของกฎแบบ dynamic ซึ่งจะถูกส่ง โดยตรง ไปยัง CSS ที่สร้างขึ้น (ซึ่งหมายความว่าคุณต้องดูแลสิ่งต่างๆ เช่น CSS escaping, variant applying, CSS constructing, และอื่นๆ)

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

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // ละทิ้งกฎที่ไม่ตรงกัน
      if (name.includes('something'))
        return

      // หากคุณต้องการ คุณสามารถปิดใช้งาน variants สำหรับกฎนี้
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // ส่งคืนสตริงแทนอ็อบเจกต์
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* คุณสามารถมีหลายกฎได้ */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* หรือ media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})