لطفا صبر کنید ...

معرفی SASS و LESS و بررسی تفاوت بین آن‌ها

سعید هوشیار

توسط سعید هوشیار

دیدگاه ها: 0
بازدید ها : 271
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

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


less چیست؟

less چیست ؟

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

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

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

 Sass چیست؟

Sass زبان پیشرفته CSS، پایدار و قدرتمند است. Sass قدرت و ظرافت را به زبان اصلی اضافه می‌کند. Sass به شما این امکان را می‌دهد که از متغیرها، قوانین توافقی، مخلوط‌ها، واردات درون خطی و غیره بیشتر استفاده کنید. Sass کمک می‌کند تا استایل‌های بزرگ را به خوبی سازماندهی کنید و استایل‌های کوچک را به سرعت و به ویژه با کمک کتابخانه کوچک Compass دریافت کنید.

انواع سینتکس در Sass 

Sass دارای دو نوع سینتکس است:

  1. (SCSS (Sassy CSS: استفاده از فایل با فرمت scss. که سازگاری بالایی با سینتکس CSS دارد.
  2. دندانه‌ دار (همان Sass): از فرمت sass. استفاده می‌کند و به صورت دندانه‌ای است، این مورد نیز به با CSS سازگاری دارد و نوشتن آن سریع‌تر است. 

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

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

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

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

مهم ترین تفاوت بین LESS و SASS

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

چند راه حل برای حل این مشکل در LESS وجود دارد، یکی از راه‌ها این است که LESS را فقط در حین روند توسعه (Development) استفاده کنید و بعد از اینکه کارتان تمام شد آن را به صورت یک خروجی CSS تبدیل کنید و بعد آن را توسط یک برنامه minifier به صورت خلاصه و پشت سر هم تبدیل کنید و آن را درون یک فایل CSS جدا بریزید تا به جای فایل‌های LESS استفاده شوند و یا از برنامه LESS.app استفاده کنید.

با این کار، کاربر نیازی به فعال بودن javascript بر روی مرورگر خود ندارد. همچنین، یکی از خوبی‌های SASS این است که نیاز نیست آن را به صورت جدا درون فایل CSS قرار دهید و می‌توانید به صورت مستقل اینکار را انجام دهید و یا اینکه فایل CSS را با آن یکی کنید، اما برای اجرای آن نیاز است که Ruby را نصب کنید. 

مطالعه مقالات بیشتر در لیداوب:

در این مقاله با دو فریم ورک ESS و SASS برای بهینه سازی کدها و استایل‌های CSS آشنا شده و تا حدودی تفاوت بین‌ آن‌ها را درک کردید. لیداوب کتابخانه انلاین شما برای یادگیری css و طراحی سایت است. می‌توانید سایر مقالات ما را دنبال کنید.

5 از 2 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

جدیدترین سرویس ما برای دوستان متخصص و خوش بیان در زمینه طراحی وب ارائه شد. این سرویس به شما این امکان را می دهد که به آسانی مقالات و یا ویدیو های آموزشی خود را در لیداوب منتشر کنید. فرصت مناسبی است که بدون داشتن وب سایت و یا وبلاگ و مهم تر از همه بدون هزینه، مطالب خود را در لیداوب منتشر کنید و مهم تر از همه با فروش آنها کسب درآمد کنید. همین حالا شروع کنید و این فرصت استثنایی را از دست ندهید.