التخطي إلى المحتوى
مميزات-مكتبة-LessCss-المتغيرات-الدوال مميزات مكتبة LessCss المتغيرات الدوال

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


@color: red;

h2{
  color: @color;
}
#traidnt{
  background-color: @color;
}

بعد تحويل الشفرة الخاصة بالمكتبة، سنحصل على نتيجة كالتالي:

 


h2{
  color: red;
}
#traidnt{
  background-color: red;
}

 

الدوال Mixins

بحثت كثيرا، وتجولت كي أجد معنى لكلمة mixins لم أجد لها معنى معين، ولكن وجدت أن أقرب معنى للكلمة هي «الدوال»، لأنها تشبه الـ functions في لغة php، وتتيح تلك الدوال إمكانية استخدام مجموعة من خصائص css لاستخدامها عدة مرات، ويمكنك استخدام الدالة في عدة أماكن وعدة قيم تختلف عن غيرها.

 


.corner(@val: 5px){
  -moz-border-radius: @val;
  -webkit-border-radius: @val;
  -ms-border-radius: @val;
  -o-border-radius: @val;
     border-radius: @val;
}

#box{
  .corner();
}
#circle{
  .corner(30px);
}

نتيجة تحويل الشفرة:


#box{
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
     border-radius: 5px;
}
#circle{
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
     border-radius: 30px;
}

 

التعليقات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *