أقل المغلق - دليل المبتدئين

أصبح CSS Pre-processor الآن عنصرًا أساسيًا في تطوير الويب. يشحن CSS العادي مع سمات البرمجة مثل المتغيرات والوظائف أو Mixin ، والتشغيل التي تتيح لمطوري الويب إنشاء أنماط CSS معيارية وقابلة للتطوير وأكثر قابلية للإدارة.

في هذا المنشور ، سننظر في LESS التي كانت واحدة من أكثر معالجات CSS السابقة انتشارًا ، كما تم نشرها على نطاق واسع في العديد من الأطر الأمامية مثل Bootstrap. سوف نسير أيضا من خلال الأدوات الأساسية والأدوات والإعدادات الأساسية لمساعدتك في تشغيلك مع LESS.

المترجم

بادئ ذي بدء ، سنحتاج إلى إعداد مترجم. بناء جملة LESS غير قياسي لكل مواصفات W3C. لن يكون المستعرض قادراً على معالجة الإخراج وعرضه ، على الرغم من الصفات الوراثية المشابهة لـ CSS.

فيما يلي لمحة عن رمز LESS:

 @ color-base: # 2d5e8b؛ .class1 background-colour: @ color-base؛ .class2 background-color: #fff؛ اللون: @ قاعدة اللون ؛  

سيقوم المترجم بمعالجة الشفرة وتحويل صيغة LESS إلى تنسيق CSS متوافق مع المستعرض:

 .class1 background-color: # 2d5e8b؛  .class1 .class2 background-color: #fff؛ اللون: # 2d5e8b ؛  

هناك عدد من الأدوات لتجميع CSS:

باستخدام جافا سكريبت

أقل يأتي مع less.js الملف الذي هو حقا سهلة النشر في موقع الويب الخاص بك. إنشاء ورقة أنماط مع .أقل التمديد وربطه في وثيقتك باستخدام يختلط = "أنماط / أقل" صفة، عزا.

يمكنك الحصول على ملف JS هنا ، وتنزيله من خلال Bower package manager ، عدا ذلك رابط مباشر إلى CDN ، مثل ذلك:

كنت كل مجموعة ويمكن أن يؤلف أنماط داخل .أقل. سيتم تجميع بناء جملة LESS سريعًا أثناء تحميل الصفحة. لا تنسى استخدام جافا سكريبت محبط في مرحلة الإنتاج لأنه سيؤثر بشكل سيء على أداء الموقع.

يجب عليك دائمًا ترجمة بناء جملة LESS مسبقًا وفقط خدمة CSS العادية في حين أن. يمكنك استخدام طرفية, عداء المهمة مثل الناخر أو بلع, أو تطبيق رسومي للقيام بذلك.

باستخدام CLI

يوفر LESS واجهة سطر أوامر أصلية (CLI), lessc, الذي يعالج العديد من المهام إلى ما بعد مجرد تجميع بناء جملة LESS. باستخدام CLI ، يمكننا نسخ الرموز وضغط الملفات وإنشاء خريطة مصدر. يعتمد الأمر على Node.js الذي يسمح بفعالية للأمر بالعمل عبر Windows و OS X و Linux.

تأكد من تثبيت Node.js (وإلا ، أمسك المثبت هنا) ، ثم قم بتثبيت LESS CLI من خلال NPM (Node Package Manager) باستخدام سطر الأوامر التالي.

 npm تثبيت -g أقل 

الآن لديك lessc الأمر تحت تصرفكم لتجميع LESS إلى CSS:

 نمط أقل 

باستخدام عداء المهمة

عداء المهام هو أداة تقوم بأتمتة مهام التطوير وسير العمل. بدلا من تشغيل lessc أمر في كل مرة نرغب في ترجمة رموزنا ، يمكننا إعداد تثبيت برنامج تشغيل للمهمة ، وتعيينه لمشاهدة التغييرات داخل ملفات LESS لدينا ، وتجميع LESS على الفور إلى CSS.

أداتان شائعتان في هذه الفئة اليوم هما Grunt و Gulp. لدينا سلسلة من النشرات التي تغطي هذه الأدوات. تحقق من المشاركات لمعرفة كيفية نشر هذه الأدوات في سير عملك.

• كيفية استخدام النخر لأتمتة سير العمل الخاص بك
• الابتداء مع Gulp.js
• معركة بناء البرامج النصية: Gulp Vs Grunt

باستخدام التطبيق الرسومي

بالنسبة لأولئك الذين قد لا يكونوا معتادين على استخدام الخطوط الطرفية وخطوط الأوامر ، يمكنهم اختيار واجهة رسومية بدلاً من ذلك. هناك وفرة من التطبيقات لتجميع LESS اليوم لجميع المنصات - بعضها مجاني ، وبعضها مدفوع

ستجد هنا لائحة كاملة:

التطبيق	برنامج	كلفة
خليط	نظام التشغيل X / ويندوز	حر
الكوال دب أسترالي	نظام التشغيل X / ويندوز / لينكس	حر
Prepros	نظام التشغيل X / ويندوز	فريميوم (29 دولار)
لم يحقق أي فوز	شبابيك	حر
CodeKit	OS X	USD32

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

محرر الكود

يمكنك استخدام أي محرر رمز. ما عليك سوى تثبيت مكون إضافي أو ملحق لتمييز بناء جملة LESS بألوان مناسبة ، وهي ميزة متاحة الآن تقريبًا لجميع محرري الأكواد و IDEs بما في ذلك SublimeText و Notepad ++ و VisualStudio و TextMate و Eclipse على سبيل المثال لا الحصر.

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

بناء جملة أقل

على عكس CSS المعتاد كما نعرفه ، فإن LESS تعمل مثل لغة البرمجة. انها ديناميكية ، لذلك نتوقع العثور على بعض المصطلحات مثل المتغيرات, عملية و نطاق على طول الطريق.

المتغيرات

بادئ ذي بدء ، دعونا نلقي نظرة على المتغيرات.

إذا كنت تعمل لفترة طويلة مع CSS ، فربما تكون قد كتبت شيئًا من هذا القبيل ، حيث لدينا قيم متكررة تم تعيينها في كتل الإعلان في ورقة الأنماط بأكملها.

 .class1 background-color: # 2d5e8b؛  .class2 background-color: #fff؛ اللون: # 2d5e8b ؛  .class3 border: 1px solid # 2d5e8b؛  

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

إذا كنا نستخدم proSSor قبل CSS مثل LESS ، فلن يكون المثال أعلاه مشكلة - يمكننا استخدام المتغيرات. سوف تسمح لنا المتغيرات بالتخزين ثابت القيمة التي يمكن إعادة استخدامها لاحقًا في ورقة الأنماط بأكملها.

 @ color-base: # 2d5e8b؛ .class1 background-colour: @ color-base؛  .class2 background-color: #fff؛ اللون: @ قاعدة اللون ؛  .class3 border: 1px solid @ color-base؛  

في المثال أعلاه ، نقوم بتخزين اللون # 2d5e8b في ال @ اللون قاعدة متغير. عندما تريد تغيير اللون ، نحتاج فقط إلى تغيير القيمة في هذا المتغير.

بصرف النظر عن اللون ، يمكنك أيضًا وضع قيم أخرى في المتغيرات مثل:

 @ font-family: Georgia @ dot-border: dottedtransition: linearopacity: 0.5 

Mixins

في أقل ، يمكننا استخدام Mixins لإعادة استخدام التعريفات الكاملة في قاعدة CSS في مجموعة قواعد أخرى. هنا مثال:

 .التدرجات الخلفية: #eaeaea؛ الخلفية: التدرج الخطي (أعلى ، #eaeaea ، #cccccc) ؛ الخلفية: -o-linear-gradient (top، #eaeaea، #cccccc)؛ الخلفية: -ms-linear-gradient (top، #eaeaea، #cccccc)؛ الخلفية: - التدرج الخطي (أعلى ، #eaeaea ، #cccccc) ؛ الخلفية: -تدرج خطي التدرج (أعلى ، #eaeaea ، #cccccc) ؛  

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

 div . الحدود: 1px صلب # 555 ؛ دائرة نصف قطرها الحدود: 3px ؛  

ال .صندوق سيرث كل إعلان كتلة داخل .التدرجات. لذلك ، فإن قاعدة CSS أعلاه تساوي CSS العادي التالي:

 div background: #eaeaea؛ الخلفية: التدرج الخطي (أعلى ، #eaeaea ، #cccccc) ؛ الخلفية: -o-linear-gradient (top، #eaeaea، #cccccc)؛ الخلفية: -ms-linear-gradient (top، #eaeaea، #cccccc)؛ الخلفية: - التدرج الخطي (أعلى ، #eaeaea ، #cccccc) ؛ الخلفية: -تدرج خطي التدرج (أعلى ، #eaeaea ، #cccccc) ؛ الحدود: 1px صلب # 555 ؛ دائرة نصف قطرها الحدود: 3px ؛  

علاوة على ذلك ، إذا كنت تستخدم CSS3 كثيرًا في موقع الويب الخاص بك ، يمكنك استخدام عناصر LESS لجعل عملك أسهل بكثير. عناصر LESS هي مجموعة من العناصر الشائعة CSS3 خلطات التي قد نستخدمها في كثير من الأحيان في أوراق الأنماط ، مثل الحدود بين دائرة نصف قطرها, التدرجات, شبح الهبوط وما إلى ذلك وهلم جرا.

لاستخدام عناصر LESS ، ببساطة إضافة @استيراد تحكم في ورقة أنماط LESS الخاصة بك ، ولكن لا تنسَ تنزيلها أولاً وإضافتها إلى دليل العمل الخاص بك.

 import "elements.less"؛ 

يمكننا الآن إعادة استخدام كل الطبقات المقدمة من elements.less, على سبيل المثال ، لإضافة 3PX دائرة نصف قطرها الحدود ل شعبة, يمكننا الكتابة:

 div .rounded (3px) ؛  

لمزيد من الاستخدام ، يرجى الرجوع إلى الوثائق الرسمية.

قواعد متداخلة

عندما تكتب أنماطًا في CSS عادي ، فربما تكون قد تخطيت أيضًا بنيات الكود النموذجية هذه.

 nav الارتفاع: 40 بكسل ؛ العرض: 100 ٪ ؛ الخلفية: # 455868 ؛ الحد السفلي: 2px صلب # 283744 ؛  nav li width: 600px؛ الارتفاع: 40 بكسل ؛  nav li a color: #fff؛ ارتفاع الخط: 40 بكسل ؛ text-shadow: 1px 1px 0px # 283744؛  

في CSS العادي ، نختار العناصر الفرعية عن طريق استهداف الوالد أولاً في كل مجموعة قواعد ، والتي تكون زائدة عن الحاجة إذا اتبعنا “أفضل الممارسات” المبدأ.

في LESS CSS ، يمكننا تبسيط مجموعات القواعد من خلال تداخل العناصر الطفل داخل الوالدين, على النحو التالي؛

 nav الارتفاع: 40 بكسل ؛ العرض: 100 ٪ ؛ الخلفية: # 455868 ؛ الحد السفلي: 2px صلب # 283744 ؛ li width: 600px؛ الارتفاع: 40 بكسل ؛ color: #fff؛ ارتفاع الخط: 40 بكسل ؛ text-shadow: 1px 1px 0px # 283744؛  

يمكنك أيضا تعيين الزائفة الطبقات, مثل :يحوم, إلى المحدد باستخدام رمز علامة الضم (&).

دعنا نقول أننا نريد أن نضيف :يحوم إلى علامة الربط أعلاه ، يمكننا كتابتها بهذه الطريقة:

 color: #fff؛ ارتفاع الخط: 40 بكسل ؛ text-shadow: 1px 1px 0px # 283744؛ &: hover background-color: # 000؛ اللون: # ff؛  

عملية

يمكننا أيضًا إجراء عمليات في LESS ، مثل الجمع والطرح والضرب والقسمة إلى الأرقام والألوان والمتغيرات في ورقة الأنماط.

لنفترض أننا نريد أن يكون العنصر B أعلى مرتين من العنصر A. في هذه الحالة ، يمكننا أن نكتبه بهذه الطريقة:

 @ Height: 100px .element-A height: @ Height؛  .element-B height: @ Height * 2؛  

كما ترون أعلاه ، نقوم أولاً بتخزين القيمة في @ارتفاع متغير ، ثم قم بتعيين القيمة إلى العنصر أ.

في العنصر ب ، بدلاً من حساب الارتفاع بأنفسنا, يمكننا مضاعفة الارتفاع بمقدار 2 باستخدام مشغل النجمة (*). الآن ، كلما قمنا بتغيير القيمة في @ارتفاع متغير, العنصر ب سيكون دائما ضعف الطول.

تحقق من المزيد من الأمثلة العملية المتقدمة في برنامجنا التعليمي السابق: تصميم شريط التنقل Slick Menu Navigation.

نطاق

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

 رأس color: أسود ؛ لون الخلفية: nav color: blue؛ لون الخلفية: color:color؛  

في المثال أعلاه ، فإن رأس لديه أسود لون الخلفية ، ولكن الملاحةلون الخلفية سيكون أزرق لأنه يحتوي على متغير اللون @ في نطاقه المحلي ، في حين أن ا سيكون لها أيضًا اللون الأزرق الموروث من والده الأقرب, الملاحة.

الفكر النهائي

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

إليك بعض البرامج التعليمية التي أشجعك على النظر إليها للحصول على مزيد من النصائح والممارسات ، والتي يمكن أن تساعد في رفع مهارة LESS إلى المستوى التالي.

• درس CSS الأقل: تصميم شريط التنقل في قائمة Slick
• فهم وظائف اللون أقل
• 3 ميزات جديدة أقل المغلق يجب أن تعرفه