LESS چیست؟
گر یک توسعه دهنده وب باشید، حتماً حین کار با CSS متوجه شده‌اید که بسیاری از استایل‌ها مدام تکرار می‌شوند. مشکل اصلی اینجاست که برای تغییر دادن این استایل‌های تکراری باید خطوط زیادی را اصلاح کنیم. امروز به معرفی یک زبان رفتیم تا راه حلی برای این مشکلات در CSS بیان کنیم. در این مقاله به معرفی LESS می‌روم و بررسی می‌کنم LESS چیست؟ و چه مزایایی دارد؟
LESS چیست؟
LESS مخفف عبارت Leaner Style Sheets و یک زبان پیش‌پردازنده برای CSS است. این تکنولوژی به زبان JavaScript نوشته شده است اما برای کارکردن با آن نیازی به دانستن جاوا اسکریپت ندارید.
LESS قادر است قابلیت‌های مختلفی را به CSS اضافه کند تا بتوانیم با CSS مثل یک زبان برنامه نویسی سمت سرور برخورد کنیم. برای مثال در CSS نمی‌توانیم از توابع یا متغیرها استفاده کنیم اما LESS این قابلیت‌ها را ممکن می‌سازد.
برای روشن‌تر شدن موضوع به سراغ قابلیت‌های این زبان می‌رویم.
قابلیت‌های LESS
۱- تعریف متغیر
همانطور که می‌دانید در CSS نمی‌توان متغیر تعریف کرد اما گاهی لزوم وجود متغیرها احساس می‌شود. این قابلیت در LESS وجود دارد و می‌توان از آن استفاده کرد. به مثال زیر توجه کنید:
|
۱
۲
۳
۴
۵
۶
۷
|
@width: ۲۰px;
@height: @width + ۵px;
#header {
width: @width;
height: @height;
}
|
در مثال بالا دو متغیر به نام width و height به ترتیب برای عرض و ارتفاع تعریف کرده‌ام. هر کجا این مقادیر برای عرض و ارتفاع لازم بود به جای اعداد این دو متغییر را می‌نویسیم! مزیت این روش این است که برای تغییر مقادیر، لازم نیست هربار همه‌ی تگ‌ها را بررسی کنیم و این اندازه‌ها را تغییر دهیم. کافیست مقدار متغیرها اصلاح شود.
۲- نوشتار تودرتو
به کد CSS زیر توجه کنید:
|
۱
۲
۳
۴
۵
۶
|
#header {
color: #۳۳۳;
}
#header .nav {
font–size: ۱۴px;
}
|
طبق کد بالا کلاس nav دورن هدر قرار دارد بنابراین می‌توان به کمک LESS کد را به شکل زیر نوشت:
|
۱
۲
۳
۴
۵
|
#header {
color: #۳۳۳;
.nav {
font–size: ۱۴px;
}
|
۳- استفاده از عملگرها
خیلی هیجان انگیز است اگر بدانید که با LESS می‌توان تمام عملیات‌های اصلی را انجام داد و حاصل را در متغیری ذخیره کرد!
|
۱
۲
|
@base: ۲cm * ۳mm;
@filler: @base * ۲;
|
۴- استفاده از توابع
در این زبان می‌توان برای ساده سازی ، کاهش کدنویسی و انجام محاسبات از توابع مختلفی استفاده کرد. برای مثال تابع زیر می‌تواند اندازه‌ها را به درصد تبدیل کند:
|
۱
۲
۳
۴
۵
|
@width: ۰.۵;
.class {
width: percentage(@width);
}
|
خروجی تابع بالا ۵۰٪ است. برای مشاهده‌ی سایر توابع این تکنولوژی به سایت اصلی LESS ، به آدرس lesscss.org مراجعه کنید. ده‌ها قابلیت دیگر در این زبان وجود دارد که کارکردن با آن را بسیار لذت بخش می‌کند.
مزایای استفاده از LESS
- قابلیت اجرا در سمت سرور و کاربر
- استفاده از mixin برای افزایش سرعت کدنویسی
- اجرای دستورات تودرتو
- نوشتن کدهای CSS با قابلیت یک زبان برنامه‌نویسی
- اجرای استایل و کار بر روی متغیرها
نحوه استفاده کردن از LESS در پروژه
مرورگرها کدی به نام LESS را درک نمی‌کنند. بنابراین برای اجرای این کد ۲ راه وجود دارد تا این کدها به CSS تبدیل شوند:
۱- اگر از node.js استفاده می‌کنید کافیست دستور زیر را در آن اجرا کنید:
|
۱
۲
|
npm install –g less
> lessc styles.less styles.css
|
۲- در هدر قالب خود (درون تگ <head></head>) دو خط کد زیر را اضافه کنید:
|
۱
۲
|
<link rel=“stylesheet/less” type=“text/css” href=“styles.less” />
<script src=“//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js” ></script>
|
به همین راحتی LESS در دسترس شماست. از کدنویسی لذت ببرید. اگر باز هم در این زمینه سوالی داشتید خوش حال میشوم که در نظرات همین مقاله برام نظر گذاشته تا بتوانم به بهترین شکل راهنماییتان کنم