sass چیست و چرا از آن استفاده کنیم ؟

sass یک پیش پردازنده برای css است بدین معنی که کد های sass به کد های css کامپایل می شوند . sass برای مرورگر ها قابل فهم نیست ولی css قابل فهم است , هنگامی که می خواهید از استایل هایی که در sass نوشته اید استفاده کنید باید آنها را به css کامپایل کنید . sass در تجربه کاربران از وب سایت شما مشخصا تاثیری ندارد اما روند توسعه استایل هارا برای شما سریع تر می کند و کاری می کند کدی بهتر و تمیز تر بنویسید و زمان کمتری را صرف استایل نویسی کنید .

اما چرا باید از sass استفاده کنیم ؟

###sass توسعه برنامه را سریع تر و بیشتر می کند sass باعث می شود سریع تر استایل های خود را بنویسید و همچنین استایل هایی که می نویسید قابلیت توسعه بسیار بیشتری داشته باشند . به مثال زیر توجه داشته باشید :

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

در مثال بالا در 4 کلاس message و success و error و warning از استایل های message-shared ارث بری کردیم حالا فرض کنید قرار است همین را در css پیاده سازی کنید , باید تمام استایل های message-shared را در warning و success و message و error پیاده سازی کنید . پیاده سازی این در sass بسیار تمیز تر و سریع تر از پیاده سازی آن در css است .

###وجود .scss و .sass

sass دارای دو سینتکس است یکی SCSS ( .scss) و دیگری SASS(.sass) .

تفاوت این دو فرمت در نوع نوشتار استایل ها است . در .scss شما باید در انتهای استایل ها از ; (سمیکالون ) استفاده کنید و در انتهای استایل های مربوط به یک یا چند المنت از {} ( براکت ) استفاده کنید و در واقع مانند css کد های مربوط به المنت هارا در بلوک ها قرار دهید اما در .sass اینطور نیست ! و بجای بلوک هایی که با براکت تعیین می شوند با ایندنت ها جدا سازی می شوند. این بدین معنی است که در scss تمامی استایل های css معتبر است !

###میکس این ( mixin ) mixin ها به شما اجازه می دهند تا گروهی از استایل هارا تعریف کنید و بعدا در المنت های مختلفی از آنها استفاده کنید . در mixin ها می توان حتی ورودی تعیین کرد و بر اساس ورودی استایل های گروهی را دریافت کرد . به مثال زیر توجه کنید :

@mixin theme($theme: DarkGray)
  background: $theme
  box-shadow: 0 0 1px rgba($theme, .25)
  color: #fff


.info
  @include theme

.alert
  @include theme($theme: DarkRed)

.success
  @include theme($theme: DarkGreen)

در کلاس های info و alert و success از mixin theme استفاده شده و DarkGray به عنوان ورودی متغیر $theme به آن داده شده است . دیگر نیازی نیست که یک دور کل محتوای mixin را برای هر کلاس نوشت و با هر تغییر در theme برای کل استایل هایی که theme را اینکلود کرده اند اعمال می شود.

###متغیر ها در css هم می توان متغییر تعریف کرد اما در sass به صورت کاربردی تر , راحت تر و اصولی تری پیاده سازی شده که در مثال زیر بررسی میکنیم :

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

همانطور که مشاهده کردید متغییر ها با $ شروع می شوند و مقدار دهی می شوند .

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

###چون بسیاری از کتابخانه های css و پروژه های متن باز با sass نوشته شده اند مثال آن بوت استرپ است . بوت استرپ با sass نوشته شده و بدین معنی است که اگر می خواهید سورس اصلی بوت استرپ را بخوانید یا تغییراتی در آن اعمال کنید و برای خودتان شخصی سازی کنید بهترین کار ویرایش سورس اصلی بوت استرپ است که با sass نوشته شده . و مثال های بسیار زیاد دیگری از پروژه های متن باز بزرگ دیگر که با sass نوشته شده اند .

####نظر شما چیست ؟ نظر شما در مورد sass چیست ؟ بنظرشما sass چه کاربرد های دیگری دارد ؟ در چه جاهایی استفاده می شود و چرا بایدآن را بلد باشیم ؟ نظرات خود را بیان کنید !