What is UnoCSS?

UnoCSS, esnek ve genişletilebilir olacak şekilde tasarlanmış anlık atomik CSS motorudur. Çekirdek fikir beyan etmeyendir ve tüm CSS yardımcı programları preset'ler aracılığıyla sağlanır.

Örneğin, yerel yapılandırma dosyanızda kurallar sağlayarak kendi özel CSS yardımcı programlarınızı tanımlayabilirsiniz.

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

Bu, projenize yeni bir CSS yardımcı programı m-1 ekleyecektir. UnoCSS talep üzerine çalıştığından, kod tabanınızda kullanana kadar hiçbir şey yapmayacaktır. Öyleyse böyle bir bileşenimiz olduğunu varsayalım:

<div class="m-1">Hello</div>

m-1 algılanacak ve aşağıdaki CSS oluşturulacaktır:

.m-1 { margin: 1px; }

Daha esnek hale getirmek için, kuraldaki ilk argümanı (buna eşleştirici diyoruz) RegExp olarak ve gövdeyi bir fonksiyon olarak değiştirerek kuralınızı dinamik yapabilirsiniz, örneğin:

export default defineConfig({
  rules: [
-    ['m-1', { margin: '1px' }],
+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
  ],
})

Bunu yaparak, artık keyfi margin yardımcı programlarına sahip olabilirsiniz, örneğin m-1, m-100 veya m-52.43. Ve yine, UnoCSS bunları yalnızca kullandığınızda oluşturur.

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

Presets

Birkaç kural yaptıktan sonra, bunları bir preset'e çıkarabilir ve başkalarıyla paylaşabilirsiniz. Örneğin, şirketinizin tasarım sistemi için bir preset oluşturabilir ve ekibinizle paylaşabilirsiniz.

import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [/* ... */],
  shortcuts: [/* ... */],
  // ...
}

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // kendi preset'iniz
  ],
})

Benzer şekilde, hemen kullanmaya başlamanız için birkaç resmi preset sağladık ve ayrıca birçok ilginç topluluk preset'i bulabilirsiniz.

Play

n UnoCSS'i tarayıcınızda Playground'da deneyebilirsiniz. Veya varsayılan preset'lerden yardımcı programları Interactive Docs'ta arayabilirsiniz.

Integrations

UnoCSS, çeşitli çerçeveler/araçlar için entegrasyonlarla birlikte gelir:

Examples

Tüm örneklerin kaynak kodu /examples dizininde bulunabilir.