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


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

 

نرم افزار WinLess :

چندین نرم افزار برای کامپایل less وجود دارند ولی بهترین و سبک ترین آنها نرم افزار WinLess می باشد . برای دریافت این نرم افزار می توانید به وب سایت http://winless.org/ مراجعه کرده و روی دکمه دانلود موجود در صفحه اصلی سایت کلیک کنید . حجمی حدود ۳ مگابایت بیشتر ندارد !

 

ایجاد فایل html , less :

پوشه ای بنام less ایجاد کنید و سپس یکی از نرم افزار Visual Studio یا Dream Weaver یا SumLime Text و یا Bracket را باز کرده و یک فایل html بنام index و یک فایل با پسوند less بنام style در فولدر فوق بسازید .

فایل html را باز کنید و کدهای زیر را داخل آن بنویسید :

                              



 
 First Less Example ! 


    

توضیح : در فایل html فوق ، یک div با کلاس container ساخته ایم و در آن نیز div با کلاس box تعریف کرده ایم . این کلاس ها را بعدا در css تعریف می کنیم .

حال فایل style.less را باز کنید و کد های زیر را در آن بنویسید :

                              
@w: 400px;
@h: 400px;
@color1: #ff6600;
/*******************************************/
.container {
    max-width:80%;
    margin:0 10%;
    border:2px solid red;
}
.box {
    width:@w;
    height:@h;
    background:@color1;
    margin:0 auto;
}

توضیح : در فایل less همانطور که می بینید ، بهتر است ابتدا متغیر های موردنظر را تعریف کنیم . برای تعریف متغیر در زبان less از علامت @ پشت متغیر استفاده می شود . در کدهای بالا ، سه متغیر برای عرض و طول و رنگ تعریف کرده ایم که در قسمت پایین فایل از آنها استفاده کرده ایم . بعنوان مثال نوشتیم :

                              
@w: 400px ;  
.box{ width: @w;}

به همین سادگی !

اکنون وقت آن رسیده است که فایل style.less را به برنامه winless معرفی کنیم تا برایمان کامپایل کند : بدین منظور ، برنامه WinLess را باز کنید و مطابق تصویر زیر روی دکمه Add Folder کلیک کنید .

winless-addFolder

حالا مسیر جایی که فایلهای html و less را ذخیره کرده اید را بدهید و روی Select Folder کلیک کنید . خود برنامه فایل با پسوند less را شناسایی می کند (مطابق تصویر زیر)

Winless-file-less

در این مرحله دکمه Compile را بزنید تا برنامه برای شما فایل style.css را مطابق style.less را ایجاد کند . حالا اگر به فولدر حاوی فایلهای less و html مراجعه کنید مشاهده می کنید که یک فایل style.css به فولدر اضافه شده است . از این پس هر وقت که روی فایل less خود تغییراتی اعمال کنید ، در صورتی که برنامه winless باز باشد ، تغییرات روی فایل style.css نیز انجام می شود .

اکنون باید فایل css تولید شده توسط winless را در قسمت head فایل html خود اضافه کنیم . بنابراین کد زیر را به بخش مذکور بیافزایید :

<link href="style.css" type="text/css" rel="stylesheet" />

برای دیدن خروجی ، فایل index.html را باز کنید . باید چیزی شبیه تصویر زیر مشاهده کنید :

less-result-1

فرض کنید ۱۰۰ تا باکس به این شکل در سایت خود دارید و می خواهید رنگ همه آنها را مثلا به blue تغییر دهید . دیگر لازم نیست تک تک رنگها را عوض کنیم . فقط کافیست مقدار متغیر color@ را در فایل Less تغییر دهیم .

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



دیدگاه ها :