LESS چیست؟

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

چگونه LESS را نصب کنیم ؟

ابتدا باید فایل های مربوطه رو از سایت http://lesscss.org دانلود کنید.
از فایل less.js یک کپی بگیرید و داخل پوشه وب سایتتون قرار بدید
یک فایل درست کنید و در آن استایل ها تون که به صورت less می باشد بنویسید (مانند:style.less)
و این کد را که در پایین نوشتم در قسمت کد HTML بزنید :

<head>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
</head>

همچنین یک Server-side version of LESS وجود داره که یک راه آسون برای برای نصب LESS است. همچنین برای نصب LESS روی سرور از این (Node Package Manager (NPM ابزار استفاده کنید.

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

استفاده از برنامه نویسی برای ایجاد استایل‌ها
بهبود نگارش CSS و استفاده بهینه از CSS3
افزایش سرعت کد‎نویسی به کمک mixin
خوانایی و پیمایش بهتر دستورات تو در تو
استفاده از MIXIN که همانند توابع در برنامه نویسی عمل می‌کنند. شما می‌توانید استایل‌هایی که در خیلی از مواقع از آن‌ها استفاده می‌کنید را به صورت یک تابع بنویسید و آن را هر کجا که خواستید، فراخوانی کنید.

SASSچیست؟

SASS مخفف Syntactically Awesome Style Sheets می باشد و یک زبان پیش پردازنده CSS یا CSS Preprocessor Language به حساب می آید. SASS اساسا یک روش توسعه یافته از کدنویسی در CSS همراه با سینتکس به حساب می آید.

تعدادی از تصورات غلط از SASS برای افرادی که اصلا از آن استفاده نکرده اند وجود دارد. یکی از آن تصورات غلط این است که آیا SASS جایگزین CSS می باشد؟ در پاسخ به این سوال باید گفت خیر ، جواب منفی می باشد ، SASS جایگزین CSS نمی باشد بلکه یک روش برای کوتاه تر نویسی CSS می باشد که در نهایت بعد از کامپایل شدن به همان CSS تبدیل می شود.

تبدیل SASS به CSS

برداشت اشتباهی که خیلی از افراد از SASS دارند این است که پس از اتمام کار می بایست فایل ها (SASS،SCSS) مستقیما بر روی سرور قرار گیرند تا مرورگر آن ها را بخواند.
متاسفانه این برداشت غلط می باشد و شما بعد از اتمام کار می بایست برای خوانده شدن توسط مرورگرها آن فایل ها را به CSS تبدیل کنید. به این صورت که شما باید به روش لوکال کد نویسی خود را انجام دهید و بعد از کامپایل آن خروجی CSS را بر روی سرور قرار دهید.
برای کامپایل یا تبدیل SASS به CSS می توانید با استفاده از Ruby و نصب SASS روی آن و یا نرم افزارهایی همچون Prepros این کار را به صورت لحظه به لحظه و یا به یکباره انجام داد.

برای استفاده از SASS ، ابتدا ما باید Ruby را نصب کنیم.که این کار یک عمل راحتی می باشد.مطمئن شوید گزینه ی" Add Ruby executable to your PAT " را در هنگام نصب تیک زده باشید که این کار باعث می شود که Ruby در کل برنامه در دسترس باشد.اگرچه امروزه editorهای زیادی (که شامل Visual studio 2013 Update 2 و نسخه های بالاتر نیز هستند ) وجود دارند که به صورت ذاتی و تعبیه شده ، پشتیبانی از SASS را انجام می دهند.

از این رو ، اگر شما نمی توانید Ruby را نصب کنید ، جایگزین های دیگری وجود دارد.

Gem به همراه Ruby نصب می شود.Command Prompt را با Ruby باز کنید و SASS را با Gem بوسیله Command زیر نصب کنید.

gem install sass

در صورت بروز هر خطا:

sudo gem install sass

برای تبدیل فایل های SCSS به فایل CSS:

sass .scss : .css sass sassfiles /style.scss : stylesheets/style.css

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

کاملا سازگار با CSS
استفاده از متغیرها و بلاک‌های تو در تو و MIXINها
بسیاری از توابع مفید برای دستکاری رنگ و مقادیر دیگر
ویژگی‌های پیشرفته مانند دستورالعمل‌های کنترل برای کتابخانه‌ها
خروجی قابل تنظیم با فرمت قابل تنظیم

شباهت های بین LESS و SASS

کلاس‌ها (Class)
پارامترها
قانون کلاس‌های تو در تو که باعث می‌شود از کدهای تکراری جلوگیری شود
توابعی که باعث می‌شود بتوانید از محاسبات ریاضی در CSS استفاده کنید
توابعی برای رنگ‌ها که باعث می‌شود بهتر رنگ‌ها را انتخاب کنید
قابلیتی که باعث می‌شود گروهی از استایل‌ها را فراخوانی کنید
قابلیت scope که باعث می‌شود استایل‌های خود را به صورت local مدیریت کنید
ارزیابی‌هایی از جاوا اسکریپت که باعث می‌شود آن را در طراحی سایت خود استفاده کنید.

فرق LESS با SASS

فرق LESS با SASS یکی از سوالات مهم در این بررسی است. برای پاسخ به سوال فرق LESS با SASS بهتر است موارد زیر را بدانید :

اولین فرق LESS با SASS همانطور که گفتیم LESS به زبان JavaScript نوشته شده و SASS به زبان Ruby.
تفاوت چندانی ندارد که از کدام استفاده می کنیم ولی ممکن است نصب و راه اندازی LESS آسان تر باشد. ولی در کل نباید مبنای انتخاب خود را بر زبانی که پیش پردازنده نوشته شده است ، قرار داد.

دومین فرق LESS با SASS این است که LESS فریم ورک های خیلی خوبی مانند Compass که برای SASS داریم ، را ندارد. در واقع بسیاری از افراد فقط برای استفاده از Compass از SASS استفاده می کنند.

در تعریف کردن متغیرها هم تفاوت وجود دارد. SASS از $ و LESS از @ برای تعریف متغیر ها استفاده می کند.فقط تنها مورد می تواند این باشد که در CSS استفاده دیگری از @ مثل media@ داریم.

LESS در حلقه ها فقط می تواند بر روی داده های عددی پیمایش انجام دهد ولی SASS می تواند روی تمام نوع داده ها پیمایش انجام دهد که خیلی کاربردی می باشد.

در هر دو نوع پیش پردازنده شما می توانید خودتان mixin تعریف کنید. معمولا بعد از تعریف کردن mixin دیگر برای تغییر دادن آن اقدام نمی کنید چون در چندین پروژه ممکن است از آن استفاده کرده باشید تغییر دادن آن مقداری مشکلات بوجود می آورد.

در SASS با استفاده از Compass می توان اطمینان داشت که mixin های خود را آپدیت نگه می دارد پس در موقعیت هایی که ممکن است از قسمتی از یک mixin استفاده کنیم ، را کنترل کنیم.

در LESS هم افزونه ای به نام Less Elements وجود دارد , ولی به اندازه SASS قدرتمند نیست.

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

.module-b { .module-a(); /* Copies everything from .module-a down here */ border: 1px solid red; }

برای انجام اینکار باید کلاس را @extend کرد :

.module-a { /* A bunch of stuff */ } .module-b { /* Some unique styling */ @extend .module-a; }

SASS قدرت extend کردن placeholder ها را هم دارد ،که با در نامگذاری داخلی کمک میکند که با نام کلاس ها تداخل ایجاد نشود.

قابلیت بعدی استفاده از Media Query ها هستش که با در نظر گرفتن اینکه هردو پیش پردازنده می توان با تودرتو کردن دستورها یا به اصطلاح nesting راحت تر مثلا در تغییرات رزولوشن مانور داد.

در SASS یک تکنیکی به نام respond-to وجود دارد که با استفاده از breakpoint ها به شما قدرت اضافه کردن media query ها به mixin ها را می دهد.

کلام آخر…

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

این هم در نظر داشته باشید که با یاد گرفتن هر کدام از این دو یاد گرفتن دیگری وقت زیادی از شما نخواهد گرفت.