پِرسُنال ادمین
پِرسُنال ادمین
خواندن ۳ دقیقه·۳ سال پیش

LESS و SASS چیست و چه تفاوت هایی دارد؟

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


Less چیست؟

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


Sass چیست ؟

Sass که مخفف Syntactically Awesome Style Sheets میباشد ، به زبان ساده تر یک مکمل برای زبان CSS هست ولی هرگز در کارآیی CSS تغییری ایجاد نمیکند .

Sass امکان ایجاد متغیرها در CSS را ممکن میکند اما کدهای Sass سمت سرور کامپایل و در نهایت به همان CSS تبدیل شده و به مرورگر تحویل داده میشوند .

Sass امکانات زیادی مثل متغیرها (Variables) ،  دستورات تودرتو (Nesting)، وارد کردن قطعه کدها (Partial Imports)، گروه‌بندی کدها (Mixins)، وراثت (Inheritance) و عملگرها (Operators) را در کدهای Css را فراهم می‌کند. Cascading Style Sheets یا همان CSS ، از زمانی که توسط W3C پذیرفته شده است ، مسیر طولانی را طی کرده است. زمانی بود که طراحان وب با برش تصاویر و جداول وب سایت طراحی میکردند اما با بوجود آمدن CSS3 انقلاب بزرگی در طراحی وب سایت ها بوجود آمد و مخصوص برای افرادی که روزهای سختی را با نسخه های قبلی پشت سر گذاشته بودند عالی بود  . تا اینکه  امروزه پیش پردازنده هایی مثل Sass برای CSS ساخته شده است.


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

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


تبدیل SASS به CSS

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


تفاوتهای SASS و LESS

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



برای آموزش های بیشتر با ما همراه باشید.


lesssass
طراحی سایت‌ های اختصاصی و سفارشی پیشرفته با استفاده از فریم‌ورک لاراول
شاید از این پست‌ها خوشتان بیاید