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

LESS چیه؟

درمورد پیش پردازنده های CSS توضیح داده بودم. LESS یک از اوناست

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

چطور از LESS استفاده کنم؟

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

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

حالا کافیه شروع به کدنویسی کنید. فایل جاوا اسکریپت وظیفه کامپایل کدهای less شما رو داره تا برای مرورگر قابل فهم باشه. چون مرورگر چیزی جز CSS رو درک نمیکنه!

فقط به این نکته توجه داشته باشید که برای پردازش فایل جاوا اسکریپت در مرورگر کروم, شما باید صفحه رو در لوکال هاست اجرا کنید تا بتونه فایل less شما رو پردازش کنه. یا اینکه از فایرفاکس استفاده کنید. برای راه اندازی لوکال هاست می تونید از Xampp و نرم افزارهای مشابه اون استفاده کنید. نکته ی دیگری که باید در نظر بگیرید اینه که پردازش یک فایل و کامپایل اون یه مقدار زمان بر خواهد بود و در نتیجه شما در زمان بارگذاری نهایی پروژه روی هاست بهتره که فایل less رو به CSS تبدیل کنید تا در مرورگر کاربر پردازشی انجام نشه. می تونید از این لینک , فایل های less رو به CSS کامپایل کنید.

اولین گام , تعریف متغیر در LESS

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

@main_color  : #۵۷۹۲۵۲;
@theme_red   : #dc2e29;
@theme_yellow: #F1C22E;
@theme_green : #2F976B;
@theme_blue  : #۴۲B3E5;
@text_dark   : #۳a3a3a;

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

.container{
    color: white;
    background-color: @main_color;
}

در قطعه کد بالا , مقدار متغیر @main_color یعنی #۵۷۹۲۵۲ به عنوان رنگ پس زمینه تعیین  می شود.

عملیات محاسباتی در LESS

با استفاده از عملیات محاسباتی در LESS می توانید خیلی بهینه تر و حرفه ای تر از CSS استفاده کنید.

.button-red{
    @unit:3px;
    border:@unit solid @theme_red;
    padding: @unit * 3;
    margin: @unit * 2;
}

خروجی تکه کد بالا به شکل زیر است.

.button-red{
    border: @unit solid #dc2e29;
    padding: 9px;
    margin: 6px;
}

همچنین میتونید به همین شکل سایز تمام تگ های h1 تا h6 رو متناسب با هم مشخص کنید.

@hBaseSize: 4em;

h1 { font-size: @h1Size; }
h2 { font-size: @h1Size * 0.8; }
h3 { font-size: @h1Size * 0.6; }
h4 { font-size: @h1Size * 0.4; }
h5 { font-size: @h1Size * 0.2; }

Mixin ها در LESS

Mixin ها تقریبا شبیه توابع برنامه نویسی هستن. برای مثال شما می توانید به شکل زیر یک mixin تعریف کنید.

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

div.CTA{
    border: 1px solid green;
    .circled()
}

خروجی کد فوق به شکل زیر است.

div.CTA {
    border: 1px solid green;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

همچنین می توانید برای توابع , پارامترهای ورودی در نظر بگیرید.

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

div.lowcircle{
     .circled(3px);
}
div.highcircle{
     .circled(8px);
}

در این مقاله خیلی دقیق تر در مورد Mixin ها در LESS صحبت می کنیم.

کدنویسی تودرتو در LESS

یکی از بزرگترین مزایای پیش پردازنده های CSS , کدنویسی تو در توی آن است. شما در LESS می توانید به آسانی کدنویسی کنید.

@main_color  : #۵۷۹۲۵۲;
@theme_red   : #dc2e29;
@theme_yellow: #F1C22E;
@theme_green : #2F976B;
@theme_blue  : #۴۲B3E5;
@text_dark   : #۳a3a3a;

.tran(@seconds){
    transition: all @seconds ease;
}

.wrapper {
    width: 100%;
    background: @main_color;
    border-bottom: 2px solid #283744;
    article {
        width: 600px;
        a {
            .tran(0.5s);
            color: @text_dark;
            background-color: white;
            border: 1px solid @text_dark;
            padding: 3px 5px;
            &:hover {
                background-color: @theme_yellow;
            }
        }
    }
}

تکه کد بالا , خروجی زیر را نمایش می دهد.

.wrapper {
  width: 100%;
  background: #579252;
  border-bottom: 2px solid #283744;
}
.wrapper article {
  width: 600px;
}
.wrapper article a {
  transition: all 0.5s ease;
  color: #3a3a3a;
  background-color: white;
  border: 1px solid #3a3a3a;
  padding: 3px 5px;
}
.wrapper article a:hover {
  background-color: #F1C22E;
}

تا اینجای کار با مفاهیم مقدماتی در LESS آشنا شدیم. در آینده , به صورت تخصصی تر در مورد مفاهیم پیچیده LESS صحبت می کنیم.