تعلم LESS

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

لحسن الحظ أن مجتمع الويب التطويري جاء بحلول لهذا المشكل المتعلق بـ CSS، فلدينا الآن أدوات قبل معالجة CSS، مثل Less، Sass و Stylus. تمنحك مميزات رائعة عن CSS :

المتغيرات. يمكنك الآن تغير القيم بشكل سهل جداً يكفي تغيرها في مكان واحد.

حساب القيم دينيماكيا.

الدوال. دوال مساعدة في معالجة الألوان، تحويل الصورة وغيرها.

الجانب السلبي في هذه الأدوات هو أنه عليك القيام بتحويل برمجي Compile للملفات، لإنتاج ملف CSS يعمل على المتصفحات.

Less هي عبارة عن أداة –مكتبة- مبنية على الجافاسكريبت، تحتاج إلى Node.js أو إلى المتصفح للعمل عليها، فباستطاعتك تضمين مكتبة less.js في مشروعك لعمل Compile لملفات .less بشكل تلقائي، لكن هذه الطريقة تبقى بطيئة ولا ينصح بها. الطريقة التي ينصح بها هي عمل Compile لملفات less لإنتاج ملف CSS وتضمينه في مشروعك.

يوجد العديد من البرامج لعمل Compile لملفات .less، لكن فهذه التدوينة سنستعمل node.js.

إذ لم تثبت less من قبل، فقط افتح الطرفية ونفذ أمر التثبيت :

npm install -g less

هذا الأمر سيضيف لك أوامر lessc في أي طرفية تفتحها، لتحويل ملف less إلى CSS نستعمل الآتي :

Lessc styles.less > styles.css

لنفترض أنك قمت بكتابة كافة أنماط lees لمشروعك في ملف styles.less، مع تطبيق الأمر أعلاه سينتجُ لك ملف CSS بإسم styles.css. ما عليك فعله فقط تغير اسم الملف المضمن في صفحة HTLM إلى styles.css.

في حالة كانت هناك مشاكل في التحويل سيتم إظهار الخطأ في الطرفية.

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

في المثال أسفله متغيرين يحملان قيمة للون الخلفية، والأخر قيمة للون الخط.

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

p{
  background-color: #ffffff;
  color: #1A237E;
  padding: 15px;
}

ul{
  background-color: #ffffff;
}

li{
  color: #1A237E;
}

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

للإطلاع على المزيد من الخصائص gلمتغيرات يمكنك الاستعانة بالموقع الرسمي.

تمكنك LESS من استعمال محدد Class أو id وتطبيقه بشكل مباشر على محدد آخر.

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

إذا أردت عدم إظهار العنصر المدمج في الملف الناتج CSS يكفي إضافة أقواس بعد اسم المحدد:

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

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

#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#small-circle{
  #circle
}

#big-circle{
  #circle(100px)
}

#small-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}
#big-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 100px;
  height: 100px;
}

للمزيد حول التضمين في الموقع الرسمي.

تستعمل خاصية التداخل Nesting في ترتيب هيكلة ملف النمط ليتماشى مع هيكلة ملف HTML، مما يقلل الفرص التداخل بين عناصر أخرى. مثال لذلك :

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

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

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  color: #ffffff;
  border-radius: 3px;
  margin: 10px 0;
}

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

@div-width: 100px;
@color: #03A9F4;

div{
  height: 50px;
  display: inline-block;
}

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}

div {
  height: 50px;
  display: inline-block;
}
#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

تحتوي LESS على مجموعة متنوعة من الدوال التي تسرع من العمل على ملفات الأنماط.

سنلقي لنظرة على دالة fadeout التي تقوم بنقصان شفافية اللون.

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}

في المثال أعلاه عند عمل hover على div ستصبح شفافية لون خلفية أقل بنسبة %50. هناك العديد من الدوال الرائعة التي يمكنك الإطلاع عليها من هنا.

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

يمكنك التعمق أكثر في LESS عبر الموقع الرسمي :

جميع مميزات LESS

دوال LESS

المحررات والمحولات في المتصفح لـ LEES.