محوّل Less إلى CSS
قم بتجميع Less إلى CSS قياسي متوافق مع المتصفح. أداة مجانية تعمل في المتصفح.
Less المدخل
CSS المجمَّع
أمثلة Less إلى CSS
يتم تجميع متغيرات Less والمزجات والتداخل إلى CSS قياسي. مثال:
متغيرات ومزجات ومحددات متداخلة
Less المدخل:
CSS المجمَّع:
استخدم زر مثال أعلاه لتحميل المزيد من البيانات النموذجية.
ما هو Less إلى CSS؟
Less هو معالج CSS مسبق يضيف المتغيرات والتداخل والمزجات والدوال. لا تشغّل المتصفحات Less مباشرة - فهي تتطلب CSS قياسيًا. تقوم هذه الأداة بتجميع Less الخاص بك إلى CSS جاهز للمتصفح. تُحدد توثيق Less بناء الجملة.
يعمل التجميع بالكامل في المتصفح. لا يُرسل أي شيء إلى الخادم. النتيجة CSS قياسي. في الاتجاه المعاكس (CSS إلى Less) استخدم CSS إلى Less. لـ SCSS استخدم SCSS إلى CSS.
كيفية استخدام هذه الأداة
الصق أو ارفع Less
انسخ Less الخاص بك والصقه في المحرر الأيسر. يمكنك أيضًا النقر على رفع لتحميل ملف .less أو .css. يحمّل زر مثال بيانات نموذجية. سيظهر خطأ لـ Less غير الصالح.
اعرض CSS المجمَّع
تعرض اللوحة اليمنى CSS المجمَّع. يتم حل المتغيرات وتسطيح التداخل وتوسيع المزجات. النتيجة CSS قياسي يمكن لأي متصفح استخدامه.
متى يكون Less إلى CSS مفيدًا
عندما يكون لديك Less من مشروع (مثل Bootstrap 3 أو Ant Design) أو من قاعدة كود قديمة، لكنك تحتاج CSS قياسيًا - للاختبار السريع أو النشر على CDN أو الأنظمة التي لا تحتوي على أدوات بناء - يساعد هذا التجميع. مفيد أيضًا للتصحيح: ترى بالضبط CSS الذي ينتجه Less الخاص بك.
تستخدم كثير من المشاريع القديمة وبعض أطر UI اللـ Less. إذا كنت تخصص المتغيرات أو تستخرج الأنماط، يمنحك التجميع هنا CSS النهائي. لتحويل CSS الحالي إلى بنية Less استخدم CSS إلى Less.
الأسئلة الشائعة
Less مقابل SCSS؟
يضيف كلاهما المتغيرات والتداخل والمزجات. يستخدم Less & للمحددات الأصلية؛ SCSS كذلك. يختلف بناء الجملة قليلًا. اختر بناءً على مشروعك.
هل يدعم @import؟
قد لا يتم حل الاستيرادات إذا لم تكن الملفات محمّلة. للمشاريع متعددة الملفات استخدم مجمّع Less الرسمي أو أداة البناء الخاصة بك.
هل بياناتي خاصة؟
نعم. يعمل التجميع بالكامل في المتصفح. لا يُرسل أي بيانات إلى أي خادم.
كيف تُعالَج المزجات والدوال؟
يتم توسيع المزجات والدوال المدمجة (مثل lighten() وdarken()) أثناء التجميع. يحتوي CSS المخرج على القيم المحلولة.
هل يمكنني استخدامه مع Bootstrap 3؟
يستخدم Bootstrap 3 اللـ Less. للتجميع الكامل لـ Bootstrap استخدم البناء الرسمي. تعمل هذه الأداة مع Less من ملف واحد أو مقتطفات كود.
الأدوات ذات الصلة
لـ Less: lesscss.org واستخدام Less. يُحدد MDN CSS وW3C CSS التنسيق المخرج.