LESS و ویژگی‌های بی‌نظیر آن
اگر یک توسعه‌دهنده وب باشید، حتماً حین کار با CSS متوجه شده‌اید که بسیاری از استایل‌ها مدام تکرار می‌شوند. مشکل اصلی اینجاست که برای تغییر دادن این استایل‌های تکراری باید خطوط زیادی را اصلاح کنیم. امروز به معرفی یک زبان رفتیم تا راه‌حلی برای این مشکلات در CSS بیان کنیم. در این مقاله به معرفی LESS می‌رویم و بررسی می‌کنیم LESS چیست؟ و چه مزایایی دارد؟
LESS چیست؟
LESS مخفف عبارت Leaner Style Sheets و یک زبان پیش‌پردازنده برای CSS است. این تکنولوژی به زبان JavaScript نوشته شده است اما برای کارکردن با آن نیازی به دانستن جاوا اسکریپت ندارید.
پیش پردازنده چیست؟
جاوا اسکریپت چیست؟
Less قادر است قابلیت‌های مختلفی را به CSS اضافه کند تا بتوانیم با CSS مثل یک زبان برنامه‌نویسی سمت سرور برخورد کنیم. برای مثال در CSS نمی‌توانیم از توابع یا متغیرها استفاده کنیم اما LESS این قابلیت‌ها را ممکن می‌سازد.
برای روشن‌تر شدن موضوع به سراغ قابلیت‌های این زبان می‌رویم.
قابلیت‌های LESS
۱- تعریف متغیر
همانطور که می‌دانید در CSS نمی‌توان متغیر تعریف کرد اما گاهی لزوم وجود متغیرها احساس می‌شود. این قابلیت در LESS وجود دارد و می‌توان از آن استفاده کرد. به مثال زیر توجه کنید:
1 2 3 4 5 6 7 | @width: 20px; @height: @width + 5px; #header { width: @width; height: @height; } |
در مثال بالا دو متغیر به نام width و height به ترتیب برای عرض و ارتفاع تعریف کرده‌ایم. هر کجا این مقادیر برای عرض و ارتفاع لازم بود به جای اعداد این دو متغییر را می‌نویسیم! مزیت این روش این است که برای تغییر مقادیر، لازم نیست هربار همه‌ی تگ‌ها را بررسی کنیم و این اندازه‌ها را تغییر دهیم. کافیست مقدار متغیرها اصلاح شود.
۲- نوشتار تودرتو
به کد css زیر توجه کنید:
1 2 3 4 5 6 | #header { color: #333; } #header .navigation { font-size: 14px; } |
طبق کد بالا کلاس navigation دورن هدر قرار دارد بنابراین می‌توان به کمک LESS کد را به شکل زیر نوشت:
1 2 3 4 5 | #header { color: #333; .navigation { font-size: 14px; } |
۳- استفاده از عملگرها
خیلی هیجان‌انگیز است اگر بدانید که با LESS می‌توان تمام عملیات‌های اصلی را انجام داد و حاصل را در متغیری ذخیره کرد!
1 2 | @base: 2cm * 3mm; @filler: @base * 2; |
۴- استفاده از توابع
در این زبان می‌توان برای ساده سازی، کاهش کدنویسی و انجام محاسبات از توابع مختلفی استفاده کرد. برای مثال تابع زیر می‌تواند اندازه‌ها را به درصد تبدیل کند:
1 2 3 4 5 | @width: 0.5; .class { width: percentage(@width); } |
خروجی تابع بالا ۵۰٪ است. برای مشاهده‌ی سایر توابع این تکنولوژی به lesscss.org مراجعه کنید. ده‌ها قابلیت دیگر در این زبان وجود دارد که کارکردن با آن را بسیار لذت بخش می‌کند.
مزایای استفاده از LESS
- قابلیت اجرا در سمت سرور و کاربر
- استفاده از mixin برای افزایش سرعت کدنویسی
- اجرای دستورات تودرتو
- نوشتن کدهای CSS با قابلیت یک زبان برنامه‌نویسی
- اجرای استایل و کار بر روی متغیرها
نحوه استفاده کردن از LESS در پروژه
مرورگرها کدی به نام LESS را درک نمی‌کنند. بنابراین برای اجرای این کد ۲ راه وجود دارد تا این کدها به css تبدیل شوند:
1- اگر از node.js استفاده می‌کنید کافیست دستور زیر را در آن اجرا کنید:
1 2 | npm install -g less > lessc styles.less styles.css |
۲- در هدر قالب خود (درون تگ <head></head>) دو خط کد زیر را اضافه کنید:
1 2 | <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 در دسترس شماست. از کدنویسی لذت ببرید.
دیدگاهتان را بنویسید
برای ارسال نظر باید وارد سیستم شوید.