LESS جایگزینی قدرتمند برای CSS

فکرش رو بکنین که بتونید با CSS برنامه بنویسید!! بتونید متغیر تعریف کنید و در جای جای برنامه ازش استفاده کنید و یا توابعی رو تعریف کنید و اونها رو در جاهای مختلف فراخوانی کنید. اینجوری هر زمان که نیاز به تغییر داشتید فقط کافیه متغیرتون رو تغییر بدید یا در ساختار توابعتون اصلاحاتی رو اعمال کنید. در نتیجه سرعت CSS نوشتن برای شما خیلی بالا میره و همچنین شما تبدیل به یک طراح حرفه ای میشید.

LESS یک پیش پردازنده برای CSS است. در واقع شما به زبان LESS استایل ها رو می نویسید و توسط یک کامپایلر تمامی کدهای LESS شما به CSS تبدیل میشه تا برای مرورگر قابل درک باشه.

برای مثال به کد زیر که به زبان LESS نوشته شده دقت کنید.

@color-base: #FF5951
.prodev{
    background-color: @color-base;
}

کد فوق بعد از پردازش و کامپایل به کد زیر تبدیل میشه.

.prodev{
    background-color: #FF5951;
}

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

برای کامپایل کردن این فایل به CSS هم میتوانید از یک فایل جاوا اسکریپت استفاده کنید که تمامی کدهای LESS شما رو به زبان CSS کامپایل می کنه. فایل جاوا اسکریپت رو از اینجا دانلود کنید و درست بعد از فایل .less خودتون در تگ head , اون رو لینک کنید.

<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="less.min.js"></script>

میتونید همین حالا کد بالا رو تست کنید. فقط این نکته رو در نظر بگیرید که اسکریپتی که با پسوند .js دانلود کردید در مرورگر کروم عمل نمیکنه چرا که فایلی که با پسوند .html باز میکنید , با رشته “file:” شروع میشه. برای رفع این مشکل میتونید از طریق لوکال هاست فایلتون رو باز کنید یا با مرورگر فایرفاکس اون رو تست کنید.

همه اقدامات مورد نیاز برای شروع کار با LESS رو انجام دادیم. دقت کنید که توصیه میشه از فایل جاوااسکریپت برای کامپایل فایل LESS به CSS در هاستمون استفاده نشه به این دلیل که پردازش فایل LESS نیاز به زمان داره و در نتیجه سرعت بارگذاری سایت کم میشه. از فایل جاوااسکریپت برای توسعه سایت استفاده می کنیم و زمانی که پروژه به اتمام رسید , برای آپلود پروژه در فضای اینترنت , فایل LESS رو به CSS تغییر میدیم و فقط فایل CSS تولید شده رو به همراه پروژه آپلود می کنیم.

برای خروجی CSS گرفتن از فایل LESS میتونیم از Grunt , Gulp و خط فرمان (ترمینال در مک و cmd در ویندوز) کمک بگیریم. البته نرم افزارهای گرافیکی هم برای این کار وجود دارن که می تونید از WinLess برای ویندوز و یا از Koala برای ویندوز/مک/لینوکس استفاده کنید.  همچنین میتونید از سرویس های آنلاین مثل LESS2CSS استفاده کنید.

با استفاده از یک خط دستور میتونید فایل .Less رو به راحتی به .CSS تبدیل کنید. فقط کافیه node.js رو بر روی سیستمتون نصب کرده باشید و با دستور زیر less رو به سیستمتون (از طریق npm) اضافه کنید.

npm install -g less

حالا کد زیر رو در خط فرمان بنویسید تا فایل style.css را از فایل style.less خروجی بگیرد.

lessc style.less style.css

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

حالا زمان اینه که با ساختار کدهای LESS آشنا بشیم. برخلاف LESS , CSS شبیه یک زبان برنامه نویسیه. داینامیکه و دارای متغیر , عملگر و عملوند و همچنین امکان تعریف یک تابع و فراخوانی تابع.

اگر با CSS کار کرده باشید (که حتما همینطوره) بارها به این مشکل بر خوردید که یک رنگ رو به عنوان رنگ اصلی سایتتون انتخاب میکنید و برای استفاده اون در جاهای مختلف به سراغ کد رنگی اون میرید. اما می تونید با استفاده از LESS یک متغیر تعریف کنید (برای مثال متغیری به نام maincolor) و سپس از این متغیر در جای جای سایت استفاده ببرید. در حالت عادی مشکلی نداریم اما اگر تعداد خطوط کد ما زیاد بشه این یک مشکل اساسی خواهد بود.

.class1 {
    background-color: #FF5951;
}
.class2 {
    background-color: #fff;
    color: #FF5951;
}
.class3 {
    border: 1px solid #FF5951;
}

کد فوق رو میشه با LESS به شکل زیر پیاده سازی کرد.

@maincolor: #FF5951;
 
.class1 {
    background-color: @maincolor;
}
.class2 {
    background-color: #fff;
    color: @maincolor;
}
.class3 {
    border: 1px solid @maincolor;
}

در کد بالا ما مقدار #FF5951 رو در متغیر maincolor ذخیره کردیم. هر زمان که نیاز به تغییر اون داشتیم فقط کافیه مقدار این متغیر رو تغییر بدیم.

در ضمن میتونید هر چند تا که دوست دارید متغیر تعریف کنید. برای سایز یک فونت و یا میزان وضوح یک المان.

@mainsize: 1.2em;
@half-ghost: 0.5;

در LESS می توانیم از Mixin ها استفاده کنیم تا چند خط کد CSS رو برای چندبار ننویسیم. در واقع چندین خط کد CSS رو در هر جایی که خواستیم استفاده کنیم. به کد زیر دقت کنید که برای گرادینت نوشته شده.

.gradients {
    background: #ff5951;
    background: linear-gradient(top, #ff5951, #3a3a3a);
    background: -o-linear-gradient(top, #ff5951, #3a3a3a);
    background: -ms-linear-gradient(top, #ff5951, #3a3a3a);
    background: -moz-linear-gradient(top, #ff5951, #3a3a3a);
    background: -webkit-linear-gradient(top, #ff5951, #3a3a3a);
}

می تونیم تمام این کدها رو به عنوان یک کلاس نوشت و در جاهای مختلف از آن استفاده کرد. به این تکنیک mixin میگن.

div.box {
    .gradients;
    border: 1px solid #555;
    border-radius: 3px;
}

در واقع div.box در کنار دو ویژگی اختصاصی خودش , بقیه ویژگی هایش رو از .gradients به ارث میبره. اینجوری سرعت کدنویسی هم بالاتر میره. کد زیر بعد از کامپایل به CSS , به شکل زیر تغییر میکنه.

div.box {
    background: #ff5951;
    background: linear-gradient(top, #ff5951, #3a3a3a);
    background: -o-linear-gradient(top, #ff5951, #3a3a3a);
    background: -ms-linear-gradient(top, #ff5951, #3a3a3a);
    background: -moz-linear-gradient(top, #ff5951, #3a3a3a);
    background: -webkit-linear-gradient(top, #ff5951, #3a3a3a);
    border: 1px solid #555;
    border-radius: 3px;
}

گفتم که میتونیم توسط LESS در CSS توابعی رو تعریف کنیم , برای اونها پارامترهایی رو ارسال کنیم و هر جا که میخواهیم اونها رو فراخوانی کنیم.

.circled( @radius: 5px ) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

در کد بالا یک کلاس تعریف کردیم که به آن متغیری با نام radius و مقدار پیشفرض ۵ پیکسل ارسال کردیم.هر زمان که بخواهیم میتونیم برای گرد شدن لبه هر المان , این کلاس رو فراخوانی کنیم.

p{
    .circled;
}

یا می توانیم مقدار پیشفرض این کلاس را تغییر بدیم و مقدار جدیدی برای آن ارسال کنیم.

p{
    .circled(10px);
}

همچنین اگر از CSS3 استفاده می کنید(چه دلیلی داره که استفاده نکنید؟!! ) می تونید از LESS Elements استفاده کنید. این ابزار از چندین Mixin آماده و پرکاربرد تشکیل شده که سرعت کدنویسی شما رو تا حد زیادی بالا می بره.

برای استفاده از LESS Elements باید ابتدا اون رو در فایل .less خودتون import کنید و به راحتی ازش استفاده کنید. فقط یادتون نره که اول LESS Elements رو از اینجا دانلود کنید.

@import "elements.less";

حالا می تونیم از کلاس هایی که LESS Elements در اختیارمون گذاشته استفاده کنیم. برای مثال میتونیم با دستور زیر , برای یک المان border-radius به مقدار ۳ پیکسل اعمال کنیم.

div {
    .rounded(3px);
}

امکان بعدی که LESS در اختیارمون قرار میده CSS Rule های تو در تو هست!

دیگه واقعا داریم برنامه نویسی میکنیم!

nav {
    height: 40px;
    width: 100%;
    background: #455868;
    border-bottom: 2px solid #283744;
}
nav li {
    width: 600px;
    height: 40px;
}
nav li a {
    color: #fff;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
}

حتما با این شیوه کدنویسی مواجه شدید. با کمک از LESS میتونید کد بالا رو به شکل زیر تغییر بدید و خروجی یکسان بگیرید.

nav {
    height: 40px;
    width: 100%;
    background: #455868;
    border-bottom: 2px solid #283744;
    li {
        width: 600px;
        height: 40px;
        a {
            color: #fff;
            line-height: 40px;
            text-shadow: 1px 1px 0px #283744;
        }
    }
}

همچنین برای استفاده از pseudo-class هایی مثل :hover هم میتونید به شکل زیر عمل کنید.

a {
    color: #ffffff;
    background-color: #ff5951;
    &:hover {
        background-color: #ff5951;
        color: #3a3a3a;
    }
}

امکان دیگه ای که در برنامه نویسی وجود داره , عملیات ریاضی هست. با کمک LESS میتونیم در CSS از عملگرهای ریاضی استفاده کنیم!

برای مثال یک متغیر به نام Height تعریف می کنیم و مقدار ۱۰۰px رو به اون اختصاص میدیم. کد زیر نیازی به توضیح بیشتر نداره.

@height: 100px
 
.element-A {
    height: @height;   
}
.element-B {
    height: @height * 2;
}

از همین روش میتونید برای تگ h1 یک سایز مشخص در نظر بگیرید و سایز بقیه تگ های هدر رو با توجه به اندازه h1 بدست بیارید.

@h1Size: 5em;

h1 { font-size: @h1Size; }
h2 { font-size: @h1Size * .8; }
h3 { font-size: @h1Size * .6; }
h4 { font-size: @h1Size * .4; }
h5 { font-size: @h1Size * .2; }

header {
    @color: black;
    background-color: @color;
    nav {
        @color: blue;
            background-color: @color;
        a {
                color: @color;
        }
    }
}