محوّل CSS إلى Less
حوّل CSS إلى Less مع التداخل والمتغيرات والمزجات. أداة مجانية تعمل في المتصفح.
CSS المدخل
Less المحوَّل
أمثلة CSS إلى Less
يتم تحويل محددات CSS المسطحة إلى Less متداخل. مثال:
بنية متداخلة من CSS مسطح
CSS المدخل:
Less المحوَّل:
استخدم زر مثال أعلاه لتحميل المزيد من البيانات النموذجية.
ما هو CSS إلى Less؟
Less هو معالج CSS مسبق يضيف المتغيرات والتداخل والمزجات. يُعيد تحويل CSS العادي إلى Less هيكلته مع التداخل ويجهزه لميزات Less. تحلل هذه الأداة CSS الخاص بك وتنتج بنية بأسلوب Less. تحدد مواصفات W3C CSS المصدر؛ يحدد Less المخرج.
يعمل التحويل بالكامل في المتصفح. لا يُرسل أي شيء إلى الخادم. النتيجة Less صالح. في الاتجاه المعاكس (Less إلى CSS) استخدم Less إلى CSS. لـ SCSS استخدم CSS إلى SCSS.
كيفية استخدام هذه الأداة
الصق أو ارفع CSS
انسخ CSS الخاص بك والصقه في المحرر الأيسر. يمكنك أيضًا النقر على رفع لتحميل ملف .css. يحمّل زر مثال بيانات نموذجية. سيظهر خطأ لـ CSS غير الصالح.
راجع نتيجة Less
تعرض اللوحة اليمنى Less المحوَّل. يمكن تداخل المحددات حيث تسمح البنية. يمكنك إضافة المتغيرات والمزجات يدويًا بعد التحويل.
نسخ أو تنزيل
استخدم نسخ أو تنزيل. قم بتجميع Less باستخدام Less إلى CSS للتحقق. لتنسيق CSS أولًا استخدم منسق CSS.
متى يكون CSS إلى Less مفيدًا
عند ترحيل مشروع من CSS عادي إلى Less، أو عندما يكون لديك CSS من تصدير مشروع وتريد دمجه مع قاعدة كود مبنية على Less (مثل Bootstrap 3، Ant Design)، يوفر هذا التحويل نقطة بداية. تقوم أدوات البناء مثل webpack وGulp بتجميع Less. تمنحك النتيجة بنية متداخلة يمكنك تحسينها بالمتغيرات والمزجات.
غالبًا ما تُصدر أدوات التصميم CSS عاديًا. بتحويله هنا إلى Less، يمكنك إضافته إلى بنية قائمة على المكونات. لـ SCSS استخدم CSS إلى SCSS. لبادئات vendor استخدم مضيف بادئات CSS.
الأسئلة الشائعة
هل يضيف متغيرات أو مزجات؟
يركز المحوّل على البنية (التداخل). لا يستخرج القيم المتكررة إلى متغيرات تلقائيًا. أضف المتغيرات والمزجات يدويًا حسب الحاجة.
هل بياناتي خاصة؟
نعم. يعمل التحويل بالكامل في المتصفح. لا يُرسل أي بيانات إلى الخادم.
كيف يعمل التداخل؟
تستنتج الأداة التداخل من العلاقات بين المحددات (مثل .parent .child يصبح متداخلًا). المحددات المعقدة قد تبقى مسطحة. راجع وعدّل حسب الحاجة.
Less مقابل SCSS؟
يضيف كلاهما المتغيرات والتداخل والمزجات. يُستخدم Less في Bootstrap 3 وAnt Design. يُستخدم SCSS في Bootstrap 4+ وكثير من الأطر الحديثة. اختر بناءً على مجموعة تقنياتك.
هل يمكنني تجميع النتيجة؟
نعم. الصق Less في Less إلى CSS للتجميع والتحقق. يجب أن تطابق النتيجة بنية CSS الأصلي.
الأدوات ذات الصلة
لـ Less، تفضل بزيارة lesscss.org. يحدد W3C CSS وMDN CSS التنسيق المصدر. Bootstrap. webpack. Figma.