آموزش LESS بخش سوم

در مقاله قبل ، نحوه کامپایل زبان less توسط نرم افزار winLess را آموختیم . در این مقاله مفهوم mixin ها در less و همچنین کامپایل less توسط فایل جاوااسکریپت less.min.js را یاد میگیریم .

 

استفاده از mixin ها در less :

همانطور که در کلاس .container مشاهده کردید ، برای آن یک حاشیه (border) در نظر گرفته ایم :

                              
  .container { border : 2px solid red; }

فرض کنید در چند بخش از سایت ، این حاشیه استفاده می شود . پس بهتر است آنرا بصورت mixin تعریف کنیم و در بخشهای موردنیاز فقط کافیست آنرا صدا بزنیم . بصورت زیر :

                              
   .bordered { 
        ۲px solid red; 
    }             
   .container { 
        .bordered; 
    }

به همین سادگی و زیبایی توانستید از mixin ها در less استفاده کنید .

 

اعمال چهارگانه در less :

امکان بسیار جالب دیگر در زبان شیوه نامه less ، استفاده از عملگرهای جمع ، تفریق ، ضرب و تقسیم می باشد . به کد زیر دقت کنید :

                              
@color1: black;
@color2: @color1 + #555 ;

توضیح : در متغیر color1 رنگ سیاه را تعریف کردیم و سپس در color2 رنگ color1 را با #۵۵۵ جمع کردیم . حال اگر رنگ box را برابر color2 قرار دهیم خروجی زیر را خواهیم داشت :

less-box-color

همانطور که مشاهده می شود ، رنگ سیاه به خاکستری تغییر پیدا کرد . یعنی #۵۵۵ را با رنگ سیاه یعنی #۰۰۰ جمع کرد و به خاکستری رسید (جمع اعداد هگزا دسیمال) .

 

استفاده از فایل less.min.js :

روش دیگری که می توان از زبان شیوه نامه less استفاده کرد ، اضافه کردن فایل less.min.js به بخش head سایت می باشد . با این روش ، دیگر نیازی به استفاده از نرم افزار winless نمی باشد و خود این فایل جاوا اسکریپتی ، عملیات کامپایل را انجام می دهد .

ابتدا فایل less.min.js را از طریق لینک زیر دانلود کنید :

دانلود فایل less.min.js

در مقاله بعد ، نحوه استفاده از این فایل را جهت کامپایل زبان شیوه نامه LESS را خواهیم آموخت .


تاریخ انتشار : ۱۳ فروردین ۱۳۹۵



دیدگاه ها :