العمل بفعالية مع نصائح وأدوات أقل

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

حسنًا ، إذا كنت مستعدًا ، فلنبدأ.

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

1. كود تمييز

كما ذكرنا من قبل ، لقد قدمنا ​​لك ChrunchApp. ومع ذلك ، قد لا يكون هذا التطبيق هو تفضيل كل مصمم ويب ؛ لأن لكل مصمم بيئة عمل خاصة به ، بما في ذلك محرر الكود الذي يختارونه.

بدلاً من تثبيت محرر رمز آخر ، لا يزال بإمكانك بالفعل استخدام محررك الحالي وتمكين تمييز بناء الجملة فيه. لذلك ، في هذا المنشور ، سوف أشارك بعض النصائح لإضافة رمز LESS لتسليط الضوء على محررين نصين مشهورين: نص سامية 2 و المفكرة++.

نص سامية 2

يعد هذا المحرر حاليًا خياري المفضل لمساعدتي في إنشاء رموز. يتوفر هذا التطبيق لنظامي التشغيل Windows و Linux و OSX ، لذا مهما كان نظام التشغيل لديك ، ستظل قادرًا على اتباع هذه النصيحة.

الآن ، دعونا نزّله من موقعه الرسمي ونجرب هذا المحرر. ثم ، اقرأ الإرشادات التالية لتمكين تمييز لون أقل فيه.

ملحوظة: يرجى التأكد من قراءة الترخيص قبل التنزيل ، لأن الإصدار المجاني مخصص للتقييم فقط.

تثبيت حزمة وحدة التحكم

أولاً ، افتح نص Sublime 2 الخاص بك ، وقم بعرض Console من هذه القائمة عرض> إظهار وحدة التحكم

ثم انسخ سطر الأوامر التالي والصقه في Console ، ثم اضغط على Enter لتثبيت عنصر تحكم الحزمة من wBond.net:

استيراد urllib2 ، السراج ؛ pf = "Package Control.sublime-package"؛ IPP = sublime.installed_packages_path ()؛ os.makedirs (ipp) إن لم يكن os.path.exists (ipp) else None؛ urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ()))؛ منفتحون (os.path.join (IPP، الجبهة الوطنية)، 'البنك الدولي'). اكتب (urllib2.urlopen ( 'http://sublime.wbond.net/'+pf.replace ( "'٪ 20 ')). قراءة ()) ؛ طباعة "الرجاء إعادة تشغيل نص سامية لإنهاء التثبيت"

هذه حزمة وحدة التحكم سوف يساعدنا على تثبيت حزمة تسليط الضوء.

تثبيت حزمة أقل تسليط الضوء

أعد تشغيل Sublime Text 2 وأظهر لوحة الأوامر من هذه القائمة أدوات> لوحة القيادة. انتظر حتى يتم تحميل قائمة الحزم. ثم اكتب ثبت المجموعة للبحث وتحميل مستودعات الحزمة.

بعد ذلك ، ابحث عن حزمة LESS من قائمة المستودع واضغط على Enter.

انتظر دقيقة حتى يقوم Sublime Text 2 بتنزيل الحزمة وتثبيتها حتى يظهر الإشعار التالي في شريط الحالة.

الذهاب إلى القائمة عرض> بناء الجملة, يجب أن تشاهد أقل في القائمة. وهذا يعني أن النص السامي 2 يدعم .أقل وينبغي أن يكون بناء جملة LESS الخاص بك أيضًا مناسبًا لتسليط الضوء على الألوان الآن.

المفكرة++

برنامج Notepad ++ هو محرر رمز مجاني ومفتوح المصدر وله العديد من الإضافات المفيدة لتوسيع وظائفه. كما أنه يستخدم على نطاق واسع من قبل العديد من مصممي / مطوري الويب وخاصة أولئك الذين يعملون مع نظام التشغيل Windows. لذلك ، قررت أيضًا تضمين التلميح لإضافة نص أقل تسليط الضوء عليه.

تثبيت أقل تسليط الضوء في المفكرة++

تمكين تمييز لون LESS في Notepad ++ سهل للغاية.

قم أولاً بتنزيل حزمة LESS لـ Notepad ++ من هذا الرابط (userDefineLang_LESS.xml). ثم اذهب الى عرض> حوار المعرفة من قبل المستخدم.

سيظهر المربع المنبثق التالي أدناه. انقر على استيراد… زر وتحديد موقع تحميلها .أكس ملف. ثم ، أعد تشغيل المفكرة++.

افتح ملفك .less وانتقل إلى قائمة اللغة. يجب أن تشاهد الآن أقل شملت. حدده لتطبيق تمييز اللون على صيغة LESS الخاصة بك.

المزيد من الموارد

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

أدوبي دريمويفر

لا شك أن Dreamweaver لديه قاعدة مستخدم ضخمة. إنه متاح لكل من Mac و Windows. لذلك ، إذا كنت تستخدم هذا المحرر ، فإليك أحد المصادر الجيدة لتثبيت ميزة LESS في Adobe DreamWeaver.

المقطع الختامي

إذا كنت تستخدم نظام Mac ، فأنت على الأرجح تعرف Coda ، يعد هذا المحرر أحد أكثر برامج Mac شعبية. وهنا كيف يمكنك تثبيت LESS في Coda.

Geany

إنه أحد محرري الأكواد الأكثر شهرة بين مستخدمي Linux. بعض أجهزة الكمبيوتر في مكتبي التي تعمل على نظام Linux تستخدم أيضًا Geany. لذلك ، إذا كنت تستخدمها أيضًا ، فيمكنك تضمين ميزة LESS من خلال اتباع هذه التعليمات على SuperUser.com

2. مترجم أقل

على عكس ChrunchApp الذي يحتوي على مترجم LESS مضمن ، فإن المحررين الآخرين لن يحصلوا عليه افتراضيًا. على الرغم من وجود بعض الطرق لتضمينها ، إلا أنها تقنية للمستخدمين عمومًا. لذا فإن أفضل حل لدي هو القيام بالتجميع باستخدام الأدوات التالية: لم يحقق أي فوز أو LESS.app. WinLESS عبارة عن برنامج مترجم مصمم لنظام Windows ، بينما تم تصميم LESS.app لنظام التشغيل OSX.

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

أولاً ، أود تنزيل WinLESS وتثبيته.

انقر فوق الزر "إضافة مجلد" وحدد موقع الدليل الذي وضعت فيه .أقل الملفات (أفترض أنك قمت بالفعل بإنشاء واحد على الأقل). بمجرد إضافة واحدة ؛ سوف WinLESS مسح والعثور على كل شيء .أقل الملفات وتظهر لك في القائمة.

الذهاب إلى القائمة ملف> الإعداد, وتأكد من فحص هذه الخيارات ؛

• ترجمة الملفات تلقائيًا عند حفظها
• عرض رسالة على ترجمة ناجحة

يمكننا أيضًا تعيين مجلد الإخراج ، في حال أردنا حفظه في مكان آخر. لكن في هذا المثال ، سنترك هذا الخيار كما هو ؛ مما يعني أنه سيتم حفظ ملف الإخراج في نفس الدليل مثل .أقل ملف.

افتح .أقل ملف من الدليل المضافة ، إجراء بعض التغييرات وحفظه.

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

إذا كنت تستخدم نظام Mac ، فيمكنك استخدام LESS.app الذي له نفس الدقة الوظيفية مثل WinLESS.

خلطات محددة مسبقا

في ممارسات تصميم الويب الحديثة الحالية ، سوف نستخدم خصائص CSS3 مثل Gradient أو Shadow أو Border Radius التي تبدو كما يلي:

-webkit-border-radius: 3px؛ -Moz-border-radius: 3px ؛ دائرة نصف قطرها الحدود: 3px ؛

أو

الخلفية: - التدرج اللوني الخطي (أعلى ، # f0f9ff 0٪ ، # a1dbff 100٪) ؛ الخلفية: -تدرج خطي-التدرج (أعلى ، # f0f9ff 0٪ ، # a1dbff 100٪) ؛ الخلفية: -o-linear-gradient (top، # f0f9ff 0٪، # a1dbff 100٪)؛ الخلفية: -ms-linear-gradient (top، # f0f9ff 0٪، # a1dbff 100٪)؛ الخلفية: التدرج الخطي (أعلى ، # f0f9ff 0٪ ، # a1dbff 100٪) ؛

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

وأحد العناصر المفضلة لدي هي "عناصر أقل" التي تحتوي على العديد من قواعد CSS3 المفيدة مسبقًا. وبالتالي ، نكتب الآن عددًا أقل من سطور التعليمات البرمجية من بادئات البائع المملة.

حسنًا ، الآن ، دعونا نرى كيف يمكن لجميع هذه النصائح أعلاه أن تساعد حقًا.

وضعهم جميعًا معًا

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

     انقر فوق لي 

إنشاء styles.less باعتباره ورقة أنماط LESS الرئيسية ، احفظها في نفس المجلد مع مستند HTML الخاص بنا وأضف المجلد إلى WinLESS.

استيراد elements.less لقد قمنا بتنزيلها قبل استخدام بناء الجملة هذا:

import "elements.less"؛

الآن ، يمكننا استخدام أي Mixins المقدمة من element.less مثل .الانحدار, .تقريب, و .يحدها. أنا متأكد من أن اسم Mixins واضح تمامًا.

بعد ذلك ، ضع قواعد LESS أدناه في ورقة الأنماط الخاصة بك. وحفظه مرة أخرى

 display: inline-block؛ الحشو: 10px 20px. اللون: # 555 ؛ زخرفة النص: لا شيء ؛ .bw-gradient (#eee، 240، 255)؛ .rounded. .bordered. &: hover .bw-gradient (#eee، 255، 240)؛  

منذ لدينا .أقل تمت إضافة الملف إلى WinLESS ، سيتم تجميعه تلقائيًا في .المغلق. الآن دعونا نرى النتائج.

حسنًا ، الأمر ليس سيئًا للغاية ، أليس كذلك ، بالنظر إلى أن هذا الزر تم إنشاؤه بسطور أقل مما هو مطلوب. وهنا هو CSS الثابت الفعلي الذي تم إنشاؤه:

 display: inline-block؛ الحشو: 10px 20px. اللون: # 555 ؛ زخرفة النص: لا شيء ؛ الخلفية: #eeeeee؛ الخلفية: -تدرج-الويب (خطي ، أسفل اليسار ، أعلى يسار ، توقف لون (0 ، # f0f0f0) ، لون توقف (1 ، #ffffff)) ؛ الخلفية: -ms-linear-gradient (bottom، # f0f0f0 0٪، # f0f0f0 100٪)؛ الخلفية: - التدرج اللوني الخطي (أسفل الوسط ، # f0f0f0 0٪ ، #ffffff 100٪) ؛ -Webkit-border-radius: 2px؛ -Moz-border-radius: 2px ؛ نصف قطر الحدود: 2 بكسل ؛ -موز-خلفية كليب: الحشو. -webkit-background-clip: صندوق الحشو ؛ الخلفية كليب: مربع الحشو. أعلى الحدود: 1px #eeeeee الصلبة ؛ الحدود اليسرى: 1px #eeeeee الصلبة ؛ الحدود اليمنى: 1px #eeeeee الصلبة ؛ أسفل الحدود: 1px #eeeeee الصلبة ؛  a: hover background: #eeeeee؛ الخلفية: -تدرج-الويب (خطي ، أسفل اليسار ، أعلى اليسار ، لون توقف (0 ، #ffffff) ، لون توقف (1 ، # f0f0f0)) ؛ الخلفية: -ms-linear-gradient (bottom، #ffffff 0٪، #ffffff 100٪)؛ الخلفية: - التدرج اللوني الخطي (أسفل الوسط ، #ffffff 0٪ ، # f0f0f0 100٪) ؛ 

باختصار

فيما يلي ملخص سريع لما ناقشناه في هذا المنشور:

• من خلال تمكين تمييز بناء الجملة في محررنا الحالي ، لا نحتاج إلى تثبيت محرر إضافي فقط لإنشاء صيغة LESS ؛ هذا يمكن أن يوفر لك بعض المسافات / الذاكرة على القرص الخاص بك.
• لم نعد بحاجة أيضًا إلى تنزيل LESS.js Library وربطها في قسم رؤوس HTML كما فعلنا في البرنامج التعليمي الأخير. بهذه الطريقة ، يبقى مستند HTML نظيفًا وأنيقًا.
• باستخدام أدوات برنامج التحويل البرمجي مثل WinLESS و LESS.app ، يمكن إنشاء إخراج CSS ثابت فورًا. لذلك ، إذا كان هناك خطأ في بناء الجملة ، فيمكننا فحصه على الفور.
• مزيج مسبق الإعداد مثل عناصر LESS هو أفضل صديق لنا. يمكن أن يوفر حقا وقتنا عند تجميع خاصية CSS3 المملة.

.