📋 محتويات الصفحة
📖 الوصف
Less هو معالج CSS مثل Sass لكن بصيغة أبسط. يستخدم JavaScript للترجمة ويمكن تشغيله في المتصفح أو Node.js. يوفر المتغيرات، الـ nesting، والـ mixins مثل Sass لكن بميزات أقل. Less كان شائعاً في Bootstrap 3 (الآن Bootstrap يستخدم Sass). لا يزال يُستخدم في بعض المشاريع القديمة والمفضلة لمن يبحث عن بديل أ...
🎯 يستخدم في
مجالات استخدام هذه الأداة
مشاريع قديمة تستخدم Less
Bootstrap 3 projects
CSS يحتاج متغيرات وmixins بسيطة
Node.js وbrowser-based compilation
✨ المميزات
أبرز مميزات هذه الأداة
أبسط من Sass
يمكن تشغيله في المتصفح
JavaScript-based compilation
Variables مدمج
Operations (حسابات رياضية)
Mixing وinheritance
Namespacing
متوافق مع جميع frameworks
⚠️ العيوب
نقاط يجب مراعاتها
أقل شهرة من Sass حالياً
ميزات أقل من Sass
أداء compilation أبطأ في Node.js
Less plugins والمجتمع أصغر
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// Variables
@primary-color: #3498db;
@base-spacing: 16px;
// Nesting
.button {
background: @primary-color;
padding: @base-spacing;
&:hover {
background: darken(@primary-color, 10%);
}
&.primary {
color: white;
}
}
// Mixins
.border-radius(@radius) {
border-radius: @radius;
-webkit-border-radius: @radius;
}
.card {
.border-radius(8px);
padding: @base-spacing * 2;
}
// Operations
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%
.container {
width: 100% - @other;
}
// Guards
.make-light-btn when (@mode = 'light') {
background: white;
color: black;
}📚 أدوات أخرى في Styling
قد يعجبك أيضاً
Bootstrap
⭐إطار عمل CSS جاهز (CSS Component Framework)
CSS Modules
⭐نهج scoped CSS (Scoped CSS Methodology)
CSS-in-JS
⭐نهج CSS في JavaScript (CSS-in-JS Concept)
Emotion
⭐مكتبة CSS-in-JS مرنة (Flexible CSS-in-JS Library)
Linaria
مكتبة CSS-in-JS بدون runtime (Zero-Runtime CSS-in-JS)
Panda CSS
مكتبة CSS-in-JS حديثة (Modern CSS-in-JS Framework)