ما هو أقل CSS وكيف تستخدمه؟

إذا كنت مطور CSS متمرسًا ، فستكون على دراية جيدة بسلبيات اللغة. لا يزال يفتقر إلى دعم واسع النطاق للميزات المطلوبة منذ فترة طويلة مثل التداخل والمزج.

Less (Leaner Style Sheets) هو امتداد لـ CSS مع العديد من الميزات القوية. إذا كنت تعرف CSS ، فإن تعلم أقل يكون سهلاً لأن بناء جملة Less متشابهة جدًا.

كيفية التثبيت أقل

يمكنك تثبيت Less بامتداد مدير حزم جافا سكريبت ، NPM عن طريق الركض:

npm تثبيت أقل -g

بعد التثبيت ، يمكنك ترجمة ملفات .أقل من الملفات إلى .css باستخدام أقل ج يأمر. على سبيل المثال ، يقوم الأمر التالي بترجمة ستايل ويخرج النتائج في style.css ملف.

lessc style.less style.css

المتغيرات في أقل

على عكس CSS العادي ، والذي يستخدم عامل التشغيل "-" لتحديد المتغيرات، يحدد Less المتغيرات باستخدام الرمز "@". على سبيل المثال:

@عرض:40 بكسل;
@ارتفاع:80 بكسل;

تقوم كتلة التعليمات البرمجية ببساطة بإنشاء متغيرين ، العرض والارتفاع اللذين يحملان قيمتين على التوالي: 40 بكسل و 80 بكسل. من الشائع أخذ القيم شائعة الاستخدام في CSS وتخزينها في متغير. هذا يجعل من السهل تعديل هذه القيم حيث لا يوجد سوى مصدر واحد للتحكم.

إليك كيفية استخدام المتغيرات في Less. يخترع index.htm ملف وإضافة الكود المعياري التالي:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<ميتامحارف="UTF-8">
<ميتاhttp-equiv="متوافق مع X-UA"محتوى="IE = حافة">
<ميتااسم="منفذ العرض"محتوى="العرض = عرض الجهاز ، المقياس الأولي = 1.0">
<وصلةrel="ورقة الأنماط"href="style.css">
<عنوان>استخدام أقل من CSSعنوان>
رأس>
<جسم>
<شعبة>
 مرحبًا من أطفال كوكب الأرض!
شعبة>
جسم>
لغة البرمجة>

بعد ذلك ، قم بإنشاء ملف ستايل ملف وإضافة ما يلي:

@عرض:400 بكسل;
@ارتفاع:400 بكسل;
@ عمودي الوسط: مركز؛
@ TXT- أبيض: أبيض؛
@ bg-red: RGB (220, 11, 11);
@ font-40:40 بكسل;
شعبة {
عرض: @عرض;
ارتفاع: @ارتفاع;
عرض: ثني؛
لون: @ TXT- أبيض;
لون الخلفية: @ bg الأحمر;
حجم الخط: @ font-40;
}

الآن ، عندما يمكنك ترجمة ملف .أقل ملف .css باستخدام أقل ج يأمر:

lessc style.less style.css

يجب أن تبدو CSS المترجمة كما يلي:

شعبة {
عرض: 400مقصف;
ارتفاع: 400مقصف;
عرض: ثني;
لون: أبيض;
لون الخلفية: # dc0b0b;
حجم الخط: 40مقصف;
}

عندما تفتح متصفحك ، هذا ما يجب أن تراه:

هناك الكثير الذي يمكنك القيام به باستخدام المتغيرات في Less ، مثل الاستيفاء الذي يسمح لك باستخدام المتغيرات مثل أسماء المحددات وعناوين URL والمزيد. فيما يلي مثال على كيفية تنفيذ الاستيفاء المتغير:

@ محدد مخصص: حاوية؛
. @ {custom-selector} {
حشوة: 10 بكسل;
هامِش: 10 بكسل;
حدود: صلب 10 بكسل;
}

تستخدم كتلة التعليمات البرمجية أعلاه الامتداد @{...} شرط لاستخدام متغير كمحدد. عند تجميع الكود ، سينتج عنه ما يلي:

.حاوية{
حشوة: 10مقصف;
هامِش: 10مقصف;
حدود: صلب 10مقصف;
}

العمليات الحسابية في أقل

يوفر Less أيضًا دعمًا للعمليات الحسابية مثل الجمع والطرح والقسمة والضرب. تعمل هذه العمليات مع الثوابت والقيم والمتغيرات.

@ متغير 1:5 بكسل;
// عملية الضرب بين المتغير والثابت
@ المتغير 2:@ متغير 1 * 2
// عملية الجمع بين القيمة والمتغير.
@ متغير 3:10 بكسل + @ متغير 2

كيفية استخدام الخلطات

يتيح لك Mixins إعادة استخدام الأنماط (أو كود CSS) في جميع أنحاء ورقة الأنماط. آخر امتدادات CSS مثل Sass كما نقدم Mixins. لتوضيح كيفية عمل mixins في Less ، قم بإنشاء index.htm وأضف الكود التالي:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<ميتامحارف="UTF-8">
<ميتاhttp-equiv="متوافق مع X-UA"محتوى="IE = حافة">
<ميتااسم="منفذ العرض"محتوى="العرض = عرض الجهاز ، المقياس الأولي = 1.0">
<وصلةrel="ورقة الأنماط"href="style.css">
<عنوان>استخدام أقل من CSSعنوان>
رأس>
<جسم>
<شعبة>
 Lorem ipsum dolor sit amet، consectetur adipisicing elit. سولوتا
 مهندس معماري repudiandae ipsum animi velit id iste dolore reprehenderit
 دولوروم! Voluptate quos autem culpa et sit، presenda reiciendis
 Facilis unde Sequi.
شعبة>
<ص>
 Lorem ipsum dolor sit amet، consectetur adipisicing elit. سولوتا
 مهندس معماري repudiandae ipsum animi velit id iste dolore reprehenderit
 دولوروم! Voluptate quos autem culpa et sit، presenda reiciendis
 Facilis unde Sequi.
ص>
<ص>
 Lorem ipsum dolor sit amet، consectetur adipisicing elit. سولوتا
 مهندس معماري repudiandae ipsum animi velit id iste dolore reprehenderit
 دولوروم! Voluptate quos autem culpa et sit، presenda reiciendis
 Facilis unde Sequi.
ص>
جسم>
لغة البرمجة>

بعد ذلك ، قم بإنشاء ملف ستايل ملف وإضافة الأسطر التالية:

.نص بسيط() {
لون الخلفية: أصفر؛
}
.الرسالة الأولى() {
لون الخلفية: أحمر؛
لون: أبيض؛
حجم الخط: 30 بكسل;
}
ص {
.نص بسيط();
}
ص::الرسالة الأولى {
.الرسالة الأولى();
}

في كتلة التعليمات البرمجية أعلاه ، هناك فئتان من فئات mixin: .نص بسيط و .الرسالة الأولى. عندما تريد استخدام مزيج في جزء آخر من ورقة الأنماط ، ما عليك سوى الإشارة إليه بالاسم مع وجود أقواس في النهاية: .mixin (). في المتصفح ، من المفترض أن ترى شيئًا كالتالي:

أسلوب التعشيش في أقل

لنفترض أن لديك div أصل به عنصرين كأبنائه: أ ص عنصر وآخر شعبة. عادةً ، إذا كنت تريد تصميم ملف ص عنصر مع اللون الأحمر و شعبة العناصر ذات اللون الأخضر ، يمكنك استخدام الطريقة التالية:

شعبةص {
لون: أحمر;
}
شعبة {
لون: أخضر
}

أقل يوفر وظائف مماثلة من خلال استخدام التعشيش. لذلك في هذه الحالة ، سيكون أقل تكافؤًا لكتلة الشفرة أعلاه هو:

شعبة {
لون: أخضر؛
ص {
لون: أحمر؛
 }
}

ليس هذا من الأسهل فقط أن تلتف حوله ، بل إنه يجعل الكود أكثر قابلية للصيانة. يُعد الرجوع إلى محددات الأصل باستخدام أقل أسهل باستخدام & المشغل أو العامل. على سبيل المثال:

زر {
لون الخلفية: أزرق؛
حدود: لا أحد؛
&:يحوم {
لون الخلفية: رمادي؛
تحول: حجم(1.2);
 }
}

سينتج عن مقطع التعليمات البرمجية أعلاه رمز CSS التالي عند تجميعه:

زر {
لون الخلفية: أزرق;
حدود: لا أحد;
}
زر:يحوم {
لون الخلفية: رمادي;
تحول: حجم(1.2);
}

فهم النطاق والوظائف في أقل

مثل لغات البرمجة العادية ، فإن المتغيرات لها نطاق الكتلة التي تحددها من خلالها. لتوضيح ذلك ، قم بإنشاء ملف index.htm ملف ، وأضف رمز HTML المعياري الأول المقدم مسبقًا. ثم أضف الكتلة التالية في ملف جسم بطاقة شعار:

<شعبةفصل="خارجي- div">
 يجب أن يكون Div الخارجي باللون الأحمر.
<ر />
<فترةفصل="الداخلية- div">
 يجب أن يكون لون div الداخلي باللون الأخضر.
فترة>
شعبة>

في ال ستايل ملف ، أضف الأسطر التالية:

@ bg-color: أحمر؛
جسم {
حجم الخط: 40 بكسل;
لون: أبيض؛
هامِش: 20 بكسل;
}
.inner-div {
@ bg-color: أخضر؛
لون الخلفية: @ bg-color;
}
.outer-div {
لون الخلفية: @ bg-color;
}

ال الداخلية - div كتلة تعيد تعريف bg- اللون متغير ، محدد النطاق إلى تلك الكتلة فقط. لذا فإن اللون الأخضر ينطبق فقط على تلك الفئة ولا يؤثر على العالمية bg- اللون عامل. عند تجميع النتيجة وفتحها في المتصفح ، هذا ما يجب أن تراه:

يوفر Less أيضًا وظائف مفيدة يمكن أن تكون مفيدة في بعض السيناريوهات. على سبيل المثال ، إذا كنت تريد تعيين نمط فقط في حالة استيفاء شرط معين ، فيمكنك القيام بذلك باستخدام ملف لو وظيفة. تحتوي هذه الوظيفة على النحو التالي:

لو((الحالة) ، القيمة 1 ، القيمة 2)

يعود الرمز القيمة 1 إذا تم استيفاء الشرط و القيمة 2 خلاف ذلك. هنا مثال:

@ var1:20 بكسل;
@ var2:20 بكسل;
شعبة {
حشوة: لو((@ var1 = @ var2), 10 بكسل, 20 بكسل);
}

يجب أن ينتج عن كتلة التعليمات البرمجية أعلاه CSS التالية عند تجميعها:

شعبة {
حشوة: 10مقصف;
}

أنجز المزيد باستخدام امتدادات CSS أقل وأخرى

يستخدم الآلاف من المطورين Less لجعل كتابة CSS ممتعة بعض الشيء. الميزات المذهلة مثل الوظائف والمزج والمتغيرات ليست سوى جزء صغير مما يقدمه Less.

أقل مناسب لكل من المشاريع الصغيرة والكبيرة. تجدر الإشارة إلى أن لغات امتداد CSS المدهشة الأخرى مثل Sass و Stylus CSS تستحق المراجعة.