mohammad javad asadi

0 %
محمدجواداسدی
توسعه دهنده وب
  • محل سکونت:
    کرمان
  • شهر:
    کرمان
html
CSS
java script
(PWA)Progressive Web App
WORDPRESS
react
react-native
PHP
  • photoshop
  • xd

LESS چیست؟

۱۹ اردیبهشت ۱۴۰۰

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

LESS چیست؟

LESS مخفف عبارت Leaner Style Sheets و یک زبان پیش‌پردازنده برای CSS است. این تکنولوژی به زبان JavaScript نوشته شده است اما برای کارکردن با آن نیازی به دانستن جاوا اسکریپت ندارید.

LESS قادر است قابلیت‌های مختلفی را به CSS اضافه کند تا بتوانیم با CSS‌ مثل یک زبان برنامه‌ نویسی سمت سرور برخورد کنیم. برای مثال در CSS نمی‌توانیم از توابع یا متغیرها استفاده کنیم اما LESS این قابلیت‌ها را ممکن می‌سازد.
برای روشن‌تر شدن موضوع به سراغ قابلیت‌های این زبان می‌رویم.

قابلیت‌های LESS

۱- تعریف متغیر

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

در مثال بالا دو متغیر به نام width و height به ترتیب برای عرض و ارتفاع تعریف کرده‌ام. هر کجا این مقادیر برای عرض و ارتفاع لازم بود به جای اعداد این دو متغییر را می‌نویسیم! مزیت این روش این است که برای تغییر مقادیر، لازم نیست هربار همه‌ی تگ‌ها را بررسی کنیم و این اندازه‌ها را تغییر دهیم. کافیست مقدار متغیرها اصلاح شود.

۲- نوشتار تودرتو

به کد CSS زیر توجه کنید:

طبق کد بالا کلاس nav دورن هدر قرار دارد بنابراین می‌توان به کمک LESS کد را به شکل زیر نوشت:

۳- استفاده از عملگرها

خیلی هیجان‌ انگیز است اگر بدانید که با LESS می‌توان تمام عملیات‌های اصلی را انجام داد و حاصل را در متغیری ذخیره کرد!

۴- استفاده از توابع

در این زبان می‌توان برای ساده سازی ، کاهش کدنویسی و انجام محاسبات از توابع مختلفی استفاده کرد. برای مثال تابع زیر می‌تواند اندازه‌ها را به درصد تبدیل کند:

خروجی تابع بالا ۵۰٪ است. برای مشاهده‌ی سایر توابع این تکنولوژی به سایت اصلی LESS ، به آدرس  lesscss.org مراجعه کنید. ده‌ها قابلیت دیگر در این زبان وجود دارد که کارکردن با آن را بسیار لذت بخش می‌کند.

مزایای استفاده از LESS

  • قابلیت اجرا در سمت سرور و کاربر
  • استفاده از mixin برای افزایش سرعت کدنویسی
  • اجرای دستورات تودرتو
  • نوشتن کدهای CSS با قابلیت یک زبان برنامه‌نویسی
  • اجرای استایل و کار بر روی متغیر‌‎ها

نحوه استفاده کردن از LESS در پروژه

مرورگرها کدی به نام LESS را درک نمی‌کنند. بنابراین برای اجرای این کد ۲ راه وجود دارد تا این کدها به CSS تبدیل شوند:

۱- اگر از node.js استفاده می‌کنید کافیست دستور زیر را در آن اجرا کنید:

۲- در هدر قالب خود (درون تگ <head></head>) دو خط کد زیر را اضافه کنید:

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

 

ارسال شده در برنامه نویسان, طراحی وب, مطالب آموزشی, وببرچسپ ها:
یک دیدگاه بنویسید
© تمامی حفوق برای محمدجواداسدی میباشد
ایمیل: asadij313@gmail.com
تلفن تماس :09387370966
logo-samandehi