الطبقات

ترتيب CSS سيؤثر على أولوياتها. بينما ستحتفظ المحرك بترتيب القواعد، أحياناً قد ترغب في تجميع بعض الأدوات للحصول على تحكم صريح في ترتيبها.

الاستخدام

على عكس Tailwind CSS الذي يقدم ثلاث طبقات ثابتة (base، components، utilities)، UnoCSS يسمح لك بتعريف الطبقات كما تريد. لتعيين الطبقة، يمكنك تمرير البيانات الوصفية كالعنصر الثالث من قواعدك:

rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }],
  // عندما تحذف الطبقة، ستكون `default`
  ['btn', { padding: '4px' }],
]

هذا سينشئ:

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

يمكن أيضاً تعيين الطبقة على كل preflight:

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

الترتيب

يمكنك التحكم في ترتيب الطبقات عن طريق:

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

الطبقات بدون ترتيب محدد سيتم ترتيبها أبجدياً.

عندما تريد الحصول على CSS المخصص الخاص بك بين الطبقات، يمكنك تحديث وحدة الدخول:

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

// الطبقات التي ليست 'components' و 'utilities' ستعود إلى هنا
import 'uno.css'

// CSS الخاص بك
import './my-custom.css'

// طبقة "utilities" سيكون لها أعلى أولوية
import 'uno:utilities.css'

CSS Cascade Layers

يمكنك إخراج CSS Cascade Layers عن طريق:

outputToCssLayers: true

يمكنك تغيير أسماء CSS Layer مع:

outputToCssLayers: {
  cssLayerName: (layer) => {
    // الطبقة الافتراضية سيتم إخراجها إلى طبقة CSS "utilities".
    if (layer === 'default')
      return 'utilities'

    // طبقة الاختصارات سيتم إخراجها إلى الطبقة الفرعية "shortcuts" لطبقة CSS "utilities".
    if (layer === 'shortcuts')
      return 'utilities.shortcuts'

    // جميع الطبقات الأخرى ستستخدم فقط اسمها كاسم طبقة CSS.
  }
}

الطبقات باستخدام المتغيرات

يمكن إنشاء الطبقات باستخدام المتغيرات.

uno-layer-<name>: يمكن استخدامه لإنشاء طبقة 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>: يمكن استخدامه لإنشاء 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; } }