LESS چیست و چگونه عمل می کند؟

LESS یکی از پیش پردازنده‌های CSS است که به روشی پویا با ایجاد مجموعه ای از متغیرها، حسابگرها، توابع و غیره کار کردن با CSS را آسان‌تر و سریع‌تر می‌کند.

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

متغیرها

متغیرها، مهم‌ترین دلیل برای استفاده از پیش پردازنده های CSS هستند. کار کردن با متغیرهای LESS کار دشواری نیست. تمامی متغیرها با علامت @ آغاز و مشخص می‌شوند و می توانند متشکل از اعداد یا داده‌های متنی باشند. همانطور که در مثال پایین دیده می شود کد LESS در ابتدای استایل تعریف شده و بعد در موقعیت‌‌های لازم فقط کد آورده می شود در حالی که کد مربوط به CSS همواره باید به صورت دستی در تمامی دستورات CSS تکرار شود.

Mixinها

Mixinها یکی دیگر از قابلیت های مطبوع زبان Less هستند که عملکردی منحصربفرد دارند. بدین ترتیب که با استفاده از Mixinها می توان خصوصیات یک کلاس را برای کلاس دیگر استفاده کرد. درنتیجه این قابلیت وجود دارد که کلاس‌ها را در HTML ترکیب نمود در حالی که این امکان در CSS وجود ندارد.

عملگرها و توابع

عملگرها در LESS عمل جمع، تفریق، تقسیم و ضرب اعداد، رنگ‌ها و سایر متغیرها را انجام می‌دهند. این توابع ساده ریاضی می توانند روابط پیچیده و جالبی را ایجاد کنند. از طرف دیگر، توابع با جاوااسکریپت کار می کنند که امکان ایجاد تغییرات در متغیرها را به شکلی خاص فراهم می‌کند.

Nesting

Nesting در LESS یکی دیگر از روش‌های کارآمد کدنویسی است. بدین ترتیب که با استفاده از Nesting بجای تکرار کد در قسمت عنوان هر دستور، کد موردنظر تنها یک بار در بخش اصلی آورده می شود و بعد بطور خودکار در تمامی بخش های لازم تکرار می شود. یکی از نکات کلیدی در Nesting این است که خواندن کد را آسان‌تر می‌نماید.

 نصب LESS

یکی از مطالب جالب توجه در مورد LESS این است که دو روش برای نصب آن وجود دارد:

۱- سمت کاربر (Client-Side)

۲- سمت سرور (Server-Side)

تفاوت این دو روش در مکان اجرای کدمی باشد که می تواند کامپیوتر کاربر و یا سرور وی باشد.

منبع: www.webdesignviews.com