تحويل Less إلى CSS — Numio
ترجم Less إلى CSS في متصفحك. يفكّ مترجم less.js الرسمي المتغيرات والتداخل والـ mixins والعمليات إلى CSS عادي، فتستطيع فحص المخرجات دون تثبيت lessc.
فحص CSS الناتج عن متغيرات Less والتداخل والـ mixins.
Less
CSS
متى تستخدمها
- فحص CSS الناتج عن متغيرات Less والتداخل والـ mixins.
- تحويل ملف Less صغير لمشروع يستخدم CSS عاديًا.
طريقة الاستخدام
- الصق شيفرة Less أو افتح ملف .less.
- اختر إعداد بادئات المتصفحات للمتصفحات التي تستهدفها.
- راجع CSS الناتج ثم انسخه.
إدخال Less
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}مخرجات CSS
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}التفاصيل والقيود
يؤدي متغير غير معرّف أو قوس غير مغلق إلى إيقاف الترجمة. ابدأ بمقتطف قصير عند تتبع خطأ.
تجري الترجمة في متصفحك. وقد يجعل @import لعنوان URL خارجي المتصفح يجلب ذلك المورد، لذا يُفضَّل استخدام شيفرة مكتفية بذاتها.
استيراد ملفات محلية أخرى وإضافات Less وخيارات المترجم الخاصة بالمشروع غير متاحة. وتعتمد بادئات المتصفحات على إعداد المتصفحات المستهدفة.
FAQ
هل هذا مماثل للترجمة باستخدام lessc؟
يستخدم less.js، وهو المترجم نفسه الذي يشغّله lessc، لذا يُترجَم الملف المكتفي بذاته إلى CSS نفسه مع الخيارات الافتراضية. أما ميزات المشروع مثل الاستيراد المحلي والإضافات فغير متاحة هنا.
هل يمكنني ترجمة ملف يستخدم @import؟
لا يمكن حل الاستيرادات التي تشير إلى ملفات أخرى على جهازك داخل المتصفح. الصق الشيفرة المستوردة مباشرة، أو ترجم المشروع كاملًا باستخدام lessc.
ما الفرق بين Less وCSS؟
Less معالج مسبق لـ CSS. يضيف المتغيرات والتداخل والـ mixins والدوال، ويجب ترجمته إلى CSS قبل أن يتمكن المتصفح من استخدامه.