LESS چیست

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

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

این زبان به روش های مختلف مانند در اختیار داشتن قابلیت هایی چون متغیرها ،توابع و MIXINها و عملگرهای حسابی توانسته قابلیت های CSS را ارتقا بخشد و آن را پویا نماید .بدین منظور میتوانید کدهای LESS را در بدنه CSS بنویسید.بدین ترتیب میتوانید از CSS به عنوان یک زبان برنامه نویسی استفاده نمایید .برای اینکه در این زبان مسلط باشید، بهتر است قبلا در کلاس آموزش html/css  شرکت کرده باشید

LESS چیست

LESS چیست

LESS چیست

برای اولین بار LESS در سال 2009 و توسط Alexis Sellier و در RUBY نوشته شد اما در نسخه های بعد تنها در جاوااسکریپت نوشته شد .این زبان ،یک زبان اوپن سورس است که در دسترس عموم قرار گرفته است.کامپایلر LESS به زبان جاوااسکریپت نوشته شده است و کدها را به فرمت استاندارد CSS تبدیل میکند.
همانگونه که گفته شد LESS یک زبان سمت کاربر که با استفاده از مرورگرهای فایرفاکس ،گوگل کروم ،سافاری و … ،و در سمت سرور توسط Node.js و Rhino قابل اجرا است و مورد بهره برداری قرار میگیرد.
LESS با هدف ساده نمودن کد نویسی استایل صفحات وب مورد استفاده قرار میگیرد.در واقع LESS پلتفرمی است که قصد ایجاد صفحات استایل دهی را با افزودن امکانات کد نویسی به برنامه نویس و طراح سایت میدهد.

ویژگی ها و مزایای LESS
• برخورداری از کدهایی خوانا و سازماندهی شده و قابل درک
• قابلیت پشتیبانی از تمامی مرورگرها
• نوشته شده در جاوااسکریپت که موجب سرعت بالای پردازش نسبت به CSS میشود
• قابلیت ایجاد سبک های متفاوت با امکان استفاده مجدد
• قابلیت حل مسئله افزونگی کدها
• نگارش کدهای CSS مشابه با زبان برنامه نویسی PHP
• قابلیت مدیریت فایل های خارجی با استفاده از import@ .دلیل استفاده از import این است که برخی از برنامه نویسان الگوهای خود را به جای یک فایل در چندین فایل تقسیم بندی میکنند.
• قابلیت ادغام چندین خصوصیت مانند (transform)، انتقال (transition)و جعبه سایه (box-shadow)
• بهبود یافته CSS و استفاده بهینه از CSS3
• قابلیت پیاده سازی در هر دو سمت کاربر و سرور
• خوانایی بالای کدهای تو در تو

نصب LESS

ساده ترین راه برای نصب LESS استفاده از Node.JS است .بدین منظور از قطعه کد زیر استفاده میکنیم:
$ npm install -g less
در خط فرمان میتوان با خط دستور زیر نام فایل خروجی را تعیین کرد
$ lessc styles.less styles.css

تبدیل کدهای LESS به CSS
برای تبدیل کدهای LESS به CSS در سایت Github پلاگین clean-css plugin را دانلود و نصب نموده و با کمک آن فایل های LESS را به CSS تبدیل نمایید .با استفاده از خط دستور زیر میتوانید این تبدیل را انجام دهید.
$ lessc –clean-css styles.less styles.min.css

آشنایی با less

روش استفاده از LESS
به نظور استفاده از LESS لازم است تا آن را به CSS ترجمه نماییم.میتوان از کدهای LESS در صفحات وب استفاده نمود.بدین منظور لازم است تا از قطعه کد زیر استفاده نمایید :
<link rel=”stylesheet/less” type=”text/css” href=”styles.less” />

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

<scr ipt src=”less.js” type=”text/javascript”></sc ript >
شما میتوانید فایل less.js را به آسانی دانلود نمایید زیرا این فایل رایگان و اوپن سورس است .
علاوه بر این میتوانید فابل جاوااسکریپت موجود در سرور اصلی را مورد استفاده قرار دهید.بدین منظور قطعه کد زیر را استفاده نمایید :
<script src=”//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js” >< /scr ipt >
از آنجا که کشور ما تحریم است ،بهتر است که فایل را بر روی سرور حود بارگذاری و مورد استفاده قرار دهید .زیرا هر لحظه ممکن است سرور اصلی از ارائه سرویس به IPهای ایران خودداری نماید و تمامی استایل دهی های شما از بین بروند.
توجه نمایید که فایل معرفی استایل را پیش از فایل معرفی اسکریپت قرار دهید .و در صورتیکه چندین فایل استایل دهید دارید ،لازم است تا نام متغیرها در فایل های مجزا ،با یکدیگر متفاوت باشند.

ما در بهترین آموزشگاه طراحی سایت در کنار شماییم.