Rules

Kurallar, yardımcı sınıfları ve ortaya çıkan CSS'i tanımlar. UnoCSS'in birçok yerleşik kuralı vardır, ancak kolayca özel kurallar eklemeye de olanak tanır.

Static rules

Bu örnekle:

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

Kullanıcıların kod tabanında m-1 algılandığında aşağıdaki CSS oluşturulacaktır:

.m-1 { margin: 0.25rem; }

Not: Gövde sözdizimi CSS özellik sözdizimini takip eder, örneğin fontWeight yerine font-weight. Özellik adında tire - varsa tırnak içine alınmalıdır.

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

Dynamic rules

Daha akıllı hale getirmek için, eşleştiriciyi RegExp olarak ve gövdeyi bir fonksiyon olarak değiştirin:

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

Gövde fonksiyonunun ilk argümanı, eşleşen grupları almak için destruct edilebilen RegExp eşleşme sonucudur.

Örneğin, aşağıdaki kullanımla:

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

karşılık gelen CSS oluşturulacaktır:

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

Tebrikler! Artık kendi güçlü atomik CSS yardımcı programlarınız var. Keyfini çıkarın!

CSS Rules Fallback

Yeni CSS özelliklerini kullanırken aynı zamanda eski tarayıcıları desteklemek için geri dönüş yapabilmek isteyebileceğiniz durumlarda, aynı anahtarlara sahip kurallar için CSS temsilini isteğe bağlı olarak 2D-dizi olarak döndürebilirsiniz. Örneğin:

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

Bu, h-100dvh'nin şunu oluşturmasını sağlar:

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

Ordering

UnoCSS, oluşturulan CSS'te tanımladığınız kuralların sırasına saygı gösterir. Sonrakiler daha yüksek önceliğe sahiptir.

Dinamik kurallar kullanırken, birden fazla token ile eşleşebilir. Varsayılan olarak, tek bir dinamik kural altında eşleşenlerin çıktısı grup içinde alfabetik olarak sıralanacaktır.

Rules merging

Varsayılan olarak, UnoCSS CSS boyutunu en aza indirmek için aynı gövdeye sahip CSS kurallarını birleştirir.

Örneğin, <div class="m-2 hover:m2"> şunu oluşturacaktır:

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

İki ayrı kural yerine:

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

Special symbols

v0.61'den itibaren, UnoCSS oluşturulan CSS'iniz için ek meta bilgiler tanımlamak üzere özel sembolleri destekler. Sembollere dinamik kural eşleştirici fonksiyonunun ikinci argümanından erişebilirsiniz.

Örneğin:

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

Şunu oluşturacaktır:

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

Available symbols

• symbols.parent: Oluşturulan CSS kuralının üst sarmalayıcısı (örneğin @supports, @media, vb.)
• symbols.selector: Oluşturulan CSS kuralının seçicisini değiştirmek için bir fonksiyon (aşağıdaki örneğe bakın)
• symbols.layer: Oluşturulan CSS kuralının UnoCSS katmanını ayarlayan bir string/fonksiyon/regex eşleşmesi
• symbols.variants: Mevcut CSS nesnesine uygulanan varyant işleyicileri dizisi
• symbols.shortcutsNoMerge: Mevcut kuralın kısayollarda birleştirilmesini devre dışı bırakan bir boolean
• symbols.noMerge: Mevcut kuralın kısayollarda birleştirilmesini devre dışı bırakan bir boolean
• symbols.sort: Mevcut CSS nesnesinin sıralama düzenini üzerine yazan bir sayı

Multi-selector rules

v0.61'den itibaren, UnoCSS JavaScript Generator fonksiyonları aracılığıyla çoklu seçiciyi destekler.

Örneğin:

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

Birden fazla CSS kuralı oluşturacaktır:

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

Fully controlled rules

TIP

Bu bir gelişmiş özelliktir, çoğu durumda gerekli olmayacaktır.