كيفية استخدام الوظائف في أقل CSS

يعد Less CSS معالجًا أوليًا قويًا وديناميكيًا لـ CSS حظي باهتمام كبير وشعبية في السنوات الأخيرة. بصفته معالجًا أوليًا ، فهو بمثابة امتداد لـ "Vanilla CSS" ، وهي لغة تصميم CSS التقليدية المستخدمة في الويب التطوير ، من خلال توفير مجموعة من الميزات والوظائف الإضافية التي تعزز التصميم العام خبرة.

إذا كنت على دراية جيدة بكتابة CSS القياسية ، فيمكنك الانتقال بسلاسة إلى استخدام Less CSS بدون منحنى تعليمي حاد. يجعل هذا التوافق من السهل الحفاظ على معرفتك الحالية بـ CSS مع الاستفادة من الإمكانات المتقدمة لـ Less.

ما هي الوظائف ولماذا هي مهمة؟

في البرمجة ، الوظيفة هي كتلة من التعليمات البرمجية التي تؤدي مهمة محددة. يمكنك أيضًا إعادة استخدامه في مكان آخر في البرنامج. عادةً ما تأخذ الوظائف البيانات وتعالجها وتعيد النتائج.

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

وظيفةcheckDiscount(السعر ، العتبة){
لو (السعر> = الحد الأدنى) {
يترك الخصم = 5/100 * سعر؛
يعودالخصم الخاص بك هو دولار{خصم} دولار`;
 } آخر {
يعود`` عذرًا ، هذا العنصر غير مؤهل للحصول على خصم. `
 }
}

ثم يمكنك استدعاء الوظيفة وتمرير ملف سعر و ال عتبة.

يترك السعر = موجه ("أدخل سعر العنصر:")
تنبيه (checkDiscount (السعر ، 500))

من خلال استخلاص منطق التحقق من الخصومات ، لا يكون البرنامج قابلاً للقراءة فقط ، ولكن لديك الآن كتلة قابلة لإعادة الاستخدام من التعليمات البرمجية التي تعالج الخصم وتعيد النتيجة. هناك الكثير مما يمكن للوظائف القيام به ، ولكن هذه فقط الأساسيات.

فهم الوظائف في أقل CSS

في CSS التقليدية ، هناك مجموعة محدودة جدًا من الوظائف المتاحة لك كمطور. واحدة من أكثر الوظائف شيوعًا في CSS هي calc () دالة الرياضيات الذي يفعل بالضبط ما يبدو - يقوم بإجراء العمليات الحسابية ويستخدم النتيجة كقيمة خاصية في CSS.

ص{
لون الخلفية: أحمر;
عرض: احسب(13مقصف- 4مقصف);
}

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

@عرض: 10 بكسل;
@ارتفاع: 20 بكسل;
شعبة{
هامِش:لو((@عرض > @ ارتفاع) ، 10 بكسل, 20 بكسل)
}

في مقطع التعليمات البرمجية أعلاه ، يتحقق المترجم الأقل من المتغير عرض (التي حددها @ رمز) أكبر من المتغير ارتفاع. إذا كان الشرط صحيحًا ، تُرجع الدالة القيمة الأولى بعد الشرط (10 بكسل). خلاف ذلك ، تقوم الدالة بإرجاع القيمة الثانية (20 بكسل).

بعد التجميع ، يجب أن يبدو إخراج CSS كما يلي:

شعبة {
هامِش: 20مقصف;
}

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

المنطقية هي متغير له قيمتان محتملتان: حقيقي أو خطأ شنيع. مع ال منطقي () تعمل في Less ، يمكنك تخزين القيمة true أو false للتعبير في متغير لاستخدامه لاحقًا. وإليك كيف يعمل.

@لون الخط: أحمر؛
@ bg-color: منطقية (@ text-color = red) ؛

في مقطع التعليمات البرمجية أعلاه ، يتحقق المترجم الأقل مما إذا كان لون الخط أحمر. ثم ، bg- اللون متغير يخزن القيمة.

شعبة{
لون الخلفية: لو(@ bg-colorوالأخضر والأصفر) ؛
}

يتم تجميع كتلة التعليمات البرمجية أعلاه إلى شيء مثل هذا:

شعبة {
لون الخلفية: أخضر;
}

استبدال النص داخل سلسلة مع وظيفة replace ()

بناء الجملة لملف يستبدل() الوظيفة تبدو كالتالي:

يستبدل(خيط, نمط, إستبدال, الأعلام)

خيط يمثل السلسلة التي تريد البحث عنها واستبدالها. نمط هي السلسلة المراد البحث عنها. نمط يمكن أن يكون أيضًا تعبيرًا عاديًا ، ولكنه عادةً عبارة عن سلسلة نصية. بعد مباراة ناجحة ، يستبدل مترجم Less CSS ذلك نمط مع ال إستبدال.

اختياريا ، يستبدل() يمكن أن تحتوي الوظيفة أيضًا على الأعلام معلمة لأعلام التعبير العادي.

@خيط: "مرحبًا";
@نمط: "ello";
@إستبدال: "أنا";
شعبة::قبل{
محتوى: يستبدل(@خيط,@نمط,@إستبدال)
}

يجب أن ينتج عن مقطع الشفرة أعلاه ما يلي بعد التجميع:

شعبة::قبل {
محتوى: "أهلاً";
}

سرد الوظائف في أقل CSS

في Less CSS ، يمكنك استخدام الفواصل أو المسافات لتحديد قائمة القيم. على سبيل المثال:

@البقالة: "خبز", "موز", "البطاطس", "لبن";

يمكنك استخدام ال طول() وظيفة لتقييم عدد العناصر في القائمة.

@نتيجة: الطول (@ البقالة) ؛

يمكنك أيضًا استخدام ملف يستخرج() دالة لاستخراج القيمة في موضع معين. على سبيل المثال ، إذا كنت تريد الحصول على العنصر الثالث في ملف البقالة القائمة ، تقوم بما يلي:

@ العنصر الثالث: extract (groceries، 3);

بخلاف لغات البرمجة العادية حيث يبدأ فهرس القائمة من 0 ، يكون فهرس بداية القائمة في Less CSS دائمًا 1.

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

شعبة {
 الهامش: النطاق (10 بكسل ، 40 بكسل ، 10) ؛
}

يجب تجميع كتلة التعليمات البرمجية أعلاه إلى ما يلي:

شعبة {
 الهامش: 10 بكسل 20 بكسل 30 بكسل 40 بكسل ؛
}

كما ترى ، يبدأ مترجم Less CSS من 10 بكسل ، مما يزيد القيمة السابقة بمقدار 10 ، حتى يصل إلى موضع النهاية (40 بكسل).

بناء موقع ويب بسيط بوظائف CSS أقل

حان الوقت لجمع كل ما تعلمته معًا وإنشاء مشروع بسيط باستخدام Less CSS. قم بإنشاء مجلد وإضافة index.htm و ستايل الملفات.

افتح ال index.htm ملف وإضافة كود HTML التالي.

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<ميتامحارف="UTF-8">
<ميتااسم="منفذ العرض"محتوى="العرض = عرض الجهاز ، المقياس الأولي = 1.0">
<وصلةrel="ورقة أنماط / أقل"يكتب="text / css"href="style.less" />
<عنوان>وثيقةعنوان>
رأس>
<جسم>
<شعبةفصل="حاوية">
<h1>
h1>
شعبة>
<النصيsrc=" https://cdn.jsdelivr.net/npm/less" >النصي>
جسم>
لغة البرمجة>

في كتلة التعليمات البرمجية أعلاه ، هناك أحد الوالدين "حاوية"شعبة مع فارغة h1 عنصر. ال src السمة على النصي تشير العلامة إلى المسار إلى Less CSS Compiler.

بدون هذا النصي علامة ، لن يتمكن المتصفح من فهم شفرتك. بدلاً من ذلك ، يمكنك تثبيت Less CSS على جهاز الكمبيوتر الخاص بك عبر مدير حزمة العقدة (NPM)، من خلال تشغيل الأمر التالي في الجهاز:

تثبيت npm -g أقل

متى كنت مستعدًا لتجميع ملف .أقل ملف ، ما عليك سوى تشغيل الأمر أدناه ، مع التأكد من تحديد الملف الذي يجب أن يكتب المترجم الإخراج إليه.

lessc style.less style.css

في ال ستايل ملف ، قم بإنشاء متغيرين هما: عرض الحاوية و حاوية-bg-color لتمثيل عرض ولون الخلفية لملف "حاوية"شعبة على التوالى.

@ عرض الحاوية: 50rem;
@ container-bg-color: أصفر؛

بعد ذلك ، قم بإنشاء ثلاثة متغيرات وهي: خيط, نمط، و إستبدال. ثم أضف الأنماط لملف "حاوية"شعبة و ال h1 عنصر.

@خيط: "مرحبًا من أطفال كوكب الأرض!";
@نمط: "أطفال كوكب الأرض!";
@إستبدال: "سكان بلوتو!";
.حاوية{
عرض: @ عرض الحاوية;
لون الخلفية: @ container-bg-color;
حشوة: لو(@ عرض الحاوية > 30 ريم، يتراوح(20 بكسل, 80 بكسل, 20),"");
حدود: صلب;
}
h1: أول طفل::بعد{
محتوى: يستبدل(@خيط,@نمط,@إستبدال);
}

في كتلة التعليمات البرمجية أعلاه ، ملف يتراوح() وظيفة تحدد ال حشوة الملكية على "حاوية"شعبة. يجب أن يقوم المترجم الأقل بترجمة ملف ستايل ملف في ما يلي:

.حاوية {
عرض: 50rem;
لون الخلفية: أصفر;
حشوة: 20مقصف 40مقصف 60مقصف 80مقصف;
حدود: صلب;
}
h1: أول طفل::بعد {
محتوى: "مرحبًامنالالسكانلبلوتو!";
}

عندما تفتح ملف index.htm ملف في المتصفح ، هذا ما يجب أن تراه:

حسِّن إنتاجيتك باستخدام معالجات CSS الأولية

في لغات البرمجة العادية ، تعمل الوظائف على تقليل مقدار التعليمات البرمجية التي تحتاجها للكتابة وتقليل الأخطاء. توفر معالجات CSS الأولية مثل Less العديد من الميزات التي تسهل كتابة كود CSS.

تكون معالجات CSS الأولية مفيدة عند العمل مع الملفات الكبيرة. إنها تجعل من السهل تصحيح الأخطاء ، وبالتالي تحسين إنتاجية المطور.