LESS و SASS هر دو به بهینه سازی کدهای زبان css کمک می‌کنند. مهمترین کاری که less و sass انجام می‌دهند، جلوگیری از تکرار کدهای css است. LESS و SASS با هم تفاوت هایی دارند که در این مقاله با آن ها آشنا خواهید شد.

LESS چیست؟

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

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

• نگارش کد های CSS مشابه زبان ‎های برنامه ‎نویسی چون PHP
• بهبود نگارش CSS و استفاده بهینه از از CSS3
• قابلیت پیاده ‎سازی در دو سمت سرور و کاربر
• تعریف متغیر ها همانند PHP و استفاده از آنها در سایر قسمت ‎ها
• اجرای آسان عملیات بر روی متغیر ‎ها
• افزایش سرعت کد‎نویسی به کمک mixin
• خوانایی و پیمایش بهتر دستورات تو در تو
• الحاق متن در هنگام ساختن فریم ‎ورک‎ ها

Mixin ها در LESS

Mixinها مشابه متغیرها عمل میکنند با این تفاوت که بجای نگهداری یک مقدار ساده، قادر به ذخیره‌ی تمامی مشخصه های یک class یا id هستند. کافیست نام یک کلاس یا id را به عنوان یک مشخصه ی CSS استفاده کنیم تا LESS به آن مراجعه کرده و تمامی مشخصه های آن را به محل جدید اضافه نماید. این مورد توسط نمونه ی زیر به خوبی قابل درک است. همچنین 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

شما می توانید با استفاده از سینتکس ها و نوشتن توابع سرعت و قدرت خود را در کدنویسی front-end افزایش دهید و هم به دوستان برنامه نویس خود بگویید که کد نویسی front-end آن چنان که فکر می کنند بد نیست. در بخش آموزش طراحی سایت هانت می‌توانید بیشتر با این حوزه و نیازمندی‌های آن آشنا شوید.

تفاوتهای SASS و LESS

مهم ترین تفاوت بین LESS و SASS این است که LESS یک library از جاوااسکریپت است و یک زبان client-side و از طرفی دیگر SASS فقط روی Ruby اجرا می‌شود که یک زبان سمت سرور است. خیلی از توسعه دهنده ها ممکن است از LESS استفاده نکنند چون همانطور که گفته شد LESS یک library جاوااسکریپت است و ممکن است که کاربر جاوااسکریپت را غیر فعال کند ولی SASS چنین مشکلی ندارد.

هانت با طراحی سایت شرکتی، شخصی و گردشگری در خدمت شما است.