آموزش کامل پیش‌پردازنده LESS
آموزش کامل پیش‌پردازنده LESS » در این مقاله ، زبان شیوه نامه LESS را معرفی کرده و کار با برنامه winless و فایل less.min.js و mixin ها را آموزش می دهیم.

آموزش کامل پیش‌پردازنده LESS

Less PreProcessor Tutorial

آموزش کامل پیش‌پردازنده LESS

 

درباره زبان شیوه نامه LESS :

در این سری آموزشی قصد داریم با زبان شیوه نامه LESS آشنا شویم .

Less مخفف Leaner Style Sheets می باشد. این زبان توسط روش هایی مثل متغیرها و توابع ، CSS را پویا (Dynamic)  ساخت است که در هر دو سمت کاربر (Client Side) مانند مرورگرهای کروم ، موزیلا و … و سمت سرور (Server Side) مانند Node.Js قابل استفاده می باشد .

وب سایت مرجع این زبان LessCss.org می باشد که می توانید توضیحات مفصلی درباره less را در آن مشاهده کنید . برای دوستانی که با زبان انگلیسی آشنایی ندارند و یا نیاز به راهنمای فارسی Less دارند وب سایت LessCss.ir پیشنهاد می شود .

 

لزوم استفاده از زبان Less:

فلسفه اصلی استفاده از این زبان به این صورت است که فرض کنید یک پروژه در مقیاس بزرگ دارید که میخواهید بعنوان مثال رنگ border بالای هدر را تغییر دهید و این رنگ در بالای سایدبارهای سمت راست و چپ و چند جای دیگر از وب سایت شما استفاده شده است . در حالت عادی باید در فایل css وب سایت خود دنبال رنگ مورد نظر بگردید و یکی یکی آنها را تغییر دهید . در حالی که ممکن است چند property را فراموش کنید عوض کنید ، کاری زمان بر نیز می باشد . در صورتی که اگر از Less استفاده کنید ، در ابتدای فایل style.less وب سایت خود ، رنگ موردنظر را که در چند قسمت مختلف سایت استفاده شده است را در متغیری بنام topColor میریزیم و از این پس هر وقت که نیاز به تغییر رنگ موردنظر بود ، فقط کافیست مقدار این متغییر را به رنگ دلخواه خود تغییر دهید .

فریمورک های بزرگ و قدرتمندی توسط این زبان استایل دهی شده اند مانند بوت استرپ ، Foundation . با این اوصاف ، وقت آن رسیده است که استایل پروژه های بزرگ خود را از این به بعد توسط Less توسعه دهید .

 

شروع کار با LESS :

کد اصلی زبان Less توسط جاوا اسکریپت نوشته شده است . برای شروع کار می توان به سه روش از less در برنامه خود استفاده کنیم :

  •  یکی اینکه نرم افزارهای کامپایل Less را دانلود کرده و فایل با پسوند less خود را به آن import کرده و فایل css مربوطه را خودش بسازد .
  • روش دوم بدین صورت است که فایل less.min.js را دانلود کرده و در بخش head سایت خود آنرا اضافه کنید .
  •  روش سوم اینست که به وب سایت هایی که بصورت آنلاین Less را به css تبدیل میکنند مراجعه کنید .

 

تا اینجای مقاله، بطور مختصر ، زبان شیوه نامه LESS را معرفی کردیم و لزوم استفاده از آنرا بیان کردیم . و همچنین سه روش کامپایل کدهای LESS را معرفی کردیم . در بخش بعد، نرم افزار WinLess را دانلود خواهیم کرد ( نرم افزاری برای کامپایل less و تبدیل آن به css ) و اولین فایل html و less را ایجاد خواهیم کرد .

 

نرم افزار WinLess :

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

 

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

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

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


<div class="container">
    <div class="box">
        &nbsp;
    </div>
</div>

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

 

محتویات فایل style.less:

حال فایل 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:

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

winless-addFolder

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

Winless-file-less

 

ایجاد شدن فایل style.css پس از کامپایل:

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

 

افزودن فایل css به بخش head فایل html:

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

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

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

less-result-1

فرض کنید ۱۰۰ تا باکس به این شکل در سایت خود دارید و می خواهید رنگ همه آنها را مثلا به blue تغییر دهید . دیگر لازم نیست تک تک رنگها را عوض کنیم . فقط کافیست مقدار متغیر color@ را در فایل 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 استفاده کنیم باید فایلهای سایت خود را روی سرور قرار دهیم (یا روی هاست واقعی و یا روی لوکال هاست) که ما در این آموزش از Local Host استفاده می کنیم .

 

اجرای لوکال هاست :

بدین منظور برنامه xampp و یا wampp را اجرا کنید و سرور آپاچی را start کنید . حال به مسیر پیش فرض زیر بروید و فولدرسایت خود (در این مثال بنام less می باشد) را در آن کپی کنید :

C:\xampp\htdocs\

در این مرحله ، آدرس http://localhost:81/less/ را در نوار آدرس مرورگر خود تایپ کنید (ممکن است پورت لوکال هاست سیستم شما تفاوت داشته باشد) .

 

ادامه استفاده از فایل جاوا اسکریپت Less :

دقت کنید که از این پس تمام تغییرات و کدها را در فایلهای واقع در لوکال هاست اعمال می کنیم .

اکنون می توانید با خیال راحت از فایل less.min.js که قبلا دانلود کردید استفاده کنید . بنابراین باید آنرا به بخش head سایت خود اضافه کنید :

<script src="less.min.js" type="text/javascript" ></script>

نکته ۱: دیگر نباید فایل css را در head تعریف کنید . بلکه می بایست فایل style.less را بصورت زیر به head اضافه کنید :

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

نکته ۲: همانطور که در کد فوق می بینید ، خاصیت rel را باید برابر stylesheet/less قرار دهیم.

نکته ۳: در تگ head ابتدا باید فایل style.less را تعریف کنیم و سپس فایل less.min.js . یعنی head وب سایت ما بصورت زیر خواهد شد :

<head>

    <meta charset="utf-8" />

    <title>Second Less Example !</title>

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

    <script src="less.min.js" type="text/javascript" ></script>

</head>

تا اینجا، نحوه اجرای لوکال هاست روی سیستم خود را آموختیم و نیز چگونگی افزودن کتابخانه less.min.js را به head سایت یاد گرفتیم . در این بخش می خواهیم در یک مثال عملی و کاربردی تر ، پیاده سازی یک صفحه ساده را براساس زبان شیوه نامه less و کامپایل آن توسط فایل less.min.js یاد بگیریم .

 

کامپایل less توسط فایل less.min.js در یک مثال عملی:

در وب سایت مثال اول یک باکس ساده را توسط کدهای less طراحی کردیم . در وب سایت مثال بعدی که می خواهیم روی لوکال هاست پیاده سازی کنیم (توسط فایل less.min.js) خروجی زیر مورد نظر ما می باشد (تصویر زیر)

کامپایل less روی لوکال هاست

کد html مثال فوق بصورت زیر می باشد :

<div class="container">
    <div class="mixin">
        <p>
           سلام . به آموزش LESS خوش آمدید
        </p>
    </div>

    <div class="menu">
        <ul>
            <li>
                <a href="#">خانه</a>
            </li>
            <li>
                <a href="#">مشتریان</a>
            </li>
            <li>
                <a href="#">گالری</a>
            </li>
            <li>
                <a href="#">تماس با ما</a>
            </li>
            <li>
                <a href="#">محصولات</a>
            </li>
        </ul>
    </div>

    <div class="clear">
        &nbsp;
    </div>

    <div class="box">
        <h1>
            وب سایت Mohtava.info
        </h1>

    </div>

    <div class="mixin footer">
        <p>
            نویسنده : احسان صفری
        </p>
    </div>
</div>
 

توضیح مثال فوق:

ابتدا مانند مثال قبل ، تگ div ای با کلاس container تعریف کرده ایم و سپس برای مشخص کردن نوار بالای منوی سایت (خوشامد گویی) ، یک div با کلاس mixin تعریف کردیم. نام mixin دلخواه می باشد ! که بعدا در فایل style.less این کلاس ها را تعریف خواهیم کرد .

سپس به منوی سایت می رسیم که درون تگ div با کلاس menu تعریف شده است و در آن مانند سایر منوها از ul و li استفاده شده است . بعد از منو از clear استفاده کرده ایم که سایر المانهای سایت را از خط بعد شروع کند . سپس باکس محتوای سایت را داریم که از کلاس box و یک تگ h1 بهره می برد . در نهایت نیز فوتر سایت را داریم که از کلاس mixin بعلاوه footer استفاده می کند .

این بود توضیح اجمالی دستورات صفحه index.html وب سایت مثال دوم .

کدهای فایل style.less:

حال به سراغ کدهای فایل style.less می رویم که مبحث اصلی آموزش ما نیز همین فایل است :

مانند قبل ، متغیرهای مورد نظرمان را در بالای فایل تعریف می کنیم :

                              
@w: 400px;
@h: 400px;
@color1: #ff8822;
@color2: @color1 + #444;
@dir: rtl;
@centered: 0 auto;
@FontFace: Tahoma;

توضیح : طول و عرض باکس محتویات سایت را تعریف کرده ایم و سپس رنگ های دلخواه و direction را جهت فارسی نویسی (راست به چپ) و وسط چین شدن را توسط ۰ auto تعریف کردیم و در نهایت نام فونت Tahoma .

در بخش های قبل، پیاده سازی یک صفحه وب سایت را توسط زبان شیوه نامه less آغاز کردیم و منوی سایت را تعریف کردیم و متغیرهای لازم را در less تعریف کردیم . در این بخش می خواهیم کدهای css مربوط به آن را تعریف کنیم .

تعریف CSS reset:

در مرحله بعد css reset را بیان می کنیم :

                              
* {
    margin: 0;
    padding: 0;
}

یعنی این دو خاصیت را به تمام المانهای سایت اعمال می کند .

تعریف استایل‌های container:

کلاس container را بصورت زیر تعریف می کنیم :

                              
.container {
    max-width: 100%;
    direction: @dir;
}

مشاهده می کنید که direction را برابر @dir یا همان rtl قرار داده ایم تا در فارسی نویسی دچار مشکل نشویم .

تعریف استایل‌های کلاس box:

حالا نوبت تعریف کلاس box است :

                              
.box {
    width: @w;
    height: @h;
    background: @color2;
    margin: @centered;
    h1 {
        text-align: center;
        color: @color1+#999;
        padding: 20px;
        .border-radius(20px, 5px);
    }
}

 

قابلیت تو در تو نویسی در less :

همانطور که در کلاس box می بینید ، h1 بصورت Nested و یا تو در تو در box تعریف شده است ، در صورتی که اگر می خواستیم مانند قبل عمل کنیم h1 را باید بصورت .box h1 تعریف میکردیم .

در h1 خاصیت border-radius دارای آرگومان می باشد (مانند توابع) . در کد زیر .border-radius را تعریف کرده ایم :

                              
.border-radius(@radius: 12px, @width: 10px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    border-width: @width;
}
 
.border-radius(@_ @_) {
    border-color: #808080;
    border-style: solid;
    background-color: @color1 – #666;
}

توضیح : کلاس border-radius دارای دو پارامتر می باشد که اولی radius (یعنی مقدار خمیدگی حاشیه های اطراف) و دومی مقدار ضخامت حاشیه و یا border می باشد . کلاس دوم که بصورت .border-radius(@_ @_) تعریف شده است بدین معنی می باشد که مقادیر radius و width هر چه می خواهد باشد ، رنگ حاشیه و استایل آن بصورت تعریف شده باشد .

تعریف یک mixin بنام bordered:

در مرحله بعد یک mixin بنام bordered تعریف کرده ایم :

                              
.bordered {
    border: 1px solid blue;
}

کلاس بعدی بنام mixin می باشد :

                              
.mixin {
    text-align: center;
    color: @color1;
    .bordered;
    padding: 10px 0;
    font-family: @FontFace;
}

توضیح : در این کلاس ، رنگ متن و نام فونت را از متغیرهای less گرفتیم و سایر خاصیت ها را دستی تعریف کردیم . و همچنین از mixin ای بنام borderd استفاده کرده ایم .

تعریف استایل فوتر سایت:

در فوتر سایت از همین کلاس mixin استفاده کردیم بعلاوه footer زیرا می خواهیم فوتر سایت ما علاوه بر اینکه خواص mixin را داشته باشد ، رنگ پس زمینه آن نیز متفاوت باشد :

                              
    .mixin.footer {
        background-color: #666;
    }

در بخش بعد، استفاده از یک یا چند آرگومان را در less یاد میگیریم و در نهایت ، کدهای style.less را بطور کلی خواهیم دید و لینک دانلود این پروژه در آخر مقاله موجود می باشد .

 

تعریف border با یک آرگومان:

اکنون border دیگری با یک آرگومان تعریف می کنیم :

                              
.BorderWithArgument(@color: #f00) {
    border: 3px solid @color;
}

که از این حاشیه در منوی سایت استفاده می کنیم :

                              
   .menu {
    width: 100%;
    background-color: #dd5500;
    .BorderWithArgument(black);
    float: right;
    ul {
        li {
            list-style: none;
            float: right;
            border-left: 1px solid #000;
            a {
                display: block;
                padding: 10px 20px;
                color: @color2;
                text-decoration: none;
            }
            &:hover {
                background-color: #fff;
            }
        }
    }
}

توضیح : مشاهده می شود که منوی سایت بخوبی از قابلیت nested بهره برده است . خاصیت BorderWithArgument اگر با آرگومان (رنگ حاشیه) صدا زده شود ، رنگ حاشیه برابر همین رنگ خواهد شد وگرنه رنگ حاشیه مقدار پیش فرض #f00 را که در کلاس آن تعریف شده ، میگیرد.

 

نحوه تعریف استایل hover در less:

اگر بخواهیم خواصی مانند hover را در less تعریف کنیم ، مانند کد بالا ، از علامت &:hover استفاده میکنیم . در صورتی که بخواهیم hover لینکهای منو را بطور کلاسیک تعریف کنیم بدین صورت می شود :

                              
   .menu ul li a:hover { }

در نهایت نیز کلاسی بنام clear تعریف می کنیم :

                              
.clear {
    clear: both;
}

 

استایل‌های کلی فایل style.less:

بطور کلی استایلهای داخل فایل style.less بصورت زیر می باشد :

                              
@w: 400px;
@h: 400px;
@color1: #ff8822;
@color2: @color1 + #444;
@dir: rtl;
@centered: 0 auto;
@FontFace: Tahoma;
/*******************************************/
* {
    margin: 0;
    padding: 0;
}
.container {
    max-width: 100%;
    direction: @dir;
}
.box {
    width: @w;
    height: @h;
    background: @color2;
    margin: @centered;
    h1 {
    text-align: center;
    color: @color1+#999;
    padding: 20px;
    .border-radius(20px, 5px);
    }
}
.border-radius(@radius: 12px, @width: 10px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    border-width: @width;
}
.border-radius(@_ @_) {
    border-color: #808080;
    border-style: solid;
    background-color: @color1 – #666;
}
.bordered {
    border: 1px solid blue;
}
.mixin {
    text-align: center;
    color: @color1;
    .bordered;
    padding: 10px 0;
    font-family: @FontFace;
}
.mixin.footer {
    background-color: #666;
}
.BorderWithArgument(@color: #f00) {
    border: 3px solid @color;
}
.menu {
    width: 100%;
    background-color: #dd5500;
    .BorderWithArgument(black);
    float: right;
    ul {
        li {
            list-style: none;
            float: right;
            border-left: 1px solid #000;
            a {
                display: block;
                padding: 10px 20px;
                color: @color2;
                text-decoration: none;
            }
            &:hover {
                background-color: #fff;
            }
        }
    }
}
.clear {
    clear: both;
}

به نکات زیر دقت کنید :

  • اگر چند فایل less داشته باشیم و بخواهیم به فایل less اصلی اضافه کنیم بصورت روبرو از دستور import در بالای فایل اصلی less استفاده می کنیم : 

@import "styles.less";

  • روش سوم برای کامپایل less ، استفاده از کامپایلرهای آنلاین مانند وب سایت های less2css.org و lesstester.com می باشد . که با مراجعه به این سایت ها ، کد less خود را در باکس مربوطه کپی کرده و کدهای css را تحویل بگیرید !

 

امیدوارم از این آموزش استفاده کرده باشید . برای دانلود سورس کد این آموزش روی لینک زیر کلیک کنید :

دانلود سورس کد آموزش LESS

لطفا دیدگاه ها و سوالات خود را به ایمیل EhsanSafari@hotmail.com ارسال نمائید . با تشکر .


برچسب‌ها:

LessCssmixinآموزش LESSآموزش mixinپیش پردازنده Lessتعریف hover در lessدرباره LESSزبان شیوه نامه LESSهاور در less

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 + شش =