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

ما میتونیم با CSS وب سایتمون رو طراحی کنیم. اما زبان stylesheet محدودیت های خودش رو برای طراح و توسعه دهنده داره. دقیقا این همان دلیلی بود که که پیش پردازنده های CSS وارد بازی شدند. CSS Preprocessor ها، زبانی هستند که با syntax های منحصر به فرد خود، CSS را تولید می کند و ویژگی های خاص خود را دارند. در ادامه به بررسی این ویژگی های منحصر به فرد و همچنین به مزایا و معایب SASS و LESS خواهیم پرداخت.

ویژگی های پیش پردازنده های CSS

پیش پردازنده های CSS با اضافه کردن تعداد زیادی از syntax های منطقی، عملکرد توسعه دهنده در نوشتن CSS را بهبود می بخشد. در نهایت کدی را که با این سینتکس نوشته شده باشد، به CSS کامپایل می شود. 3 تا از شناخته شده ترین پیش پردازنده ها، Sass، Less و Stylus هستند که ما در ادامه به معرفی 2 مورد خواهیم پرداخت. اما قبل از آن به مهمترین دلایلی که ما باید از آنها استفاده کنیم خواهیم پرداخت.

1- اصل DRY:

به نظر من هر برنامه نویسی باید این اصل را رعایت کند. "Don't Repeat Yourself" یا "خود را تکرار نکنید". اما این به چه معنی است؟

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

پیش پردازنده های CSS به شما امکان می دهند که از این اصل استفاده کنید. زیرا به ما امکان دسترسی به مواردی مانند متغیرها، Mixins و Extends را می دهد.

2- منطق پیچیده

یکی دیگر از مزایای پیش پردازنده ها، دسترسی به syntax های منطقی مانند زبان های دیگر می باشد. که این دستورات شامل حلقه ها و جملات If/Else می باشد.

استفاده از Sass و Less در عمل:

در ادامه نمونه هایی از ویژگی های اصلی Sass (Scss) و Less را مقایسه خواهیم کرد. تنها تفاوت بین Sass و Scss وجود براکت و سمیکالن می باشد.

• متغیر ها:

متغیرها را می توان برای استفاده مجدد از دیتا، استفاده نمود. به عنوان مثال می توان مقدار یک رنگ را در متغیر تعریف کرد و چندین بار از آن استفاده نمود.

تعریف متغیر با استفاده از Scss:

/* SCSS */

$primary-color: #AAF700;
$primary-bg: #DDF700;
body {
  color: $primary-color;
  background: $primary-bg;
}

تعریف متغیر با استفاده از Sass:

/* Sass */
$primary-color: #AAF700
$primary-bg: #DDF700
body
  color: $primary-color
  background: $primary-bg

تعریف متغیر با استفاده از Less که علامت @ می باشد:

/* LESS */

@primary-color: #AAF700;
@primary-bg: #DDF700;

body {
  color: @primary-color;
  background: @primary-bg;
}

ویژگی Mixins:

با استفاده از Mixins امکان این به وجود می آید که مجموعه از قوانین مربوط به CSS را بنویسید و چندین بار از آن استفاده کنید. به مثال زیر دقت کنید:

/* SCSS */
@mixin card($width, $height, $bg, $border) {
  width: $width;
  height: $height;
  background: $bg;
  border: $border;
}

و در هر بخشی که نیاز داشتیم می توانیم بدین صورت از آن استفاده کنیم:

/* SCSS */
.card-1 {
  @include card(300px, 200px, yellow, red 2px solid);
}
.card-2 {
  @include card(400px, 300px, lightblue, black 1px dotted);
}

• قانون Extends:

با قانون extend می توانیم خصوصیات هر کلاس را به روش زیر به کلاس دیگر اضافه کنیم:

/* SCSS */
.class-1 {
  width: 100%;
  height: auto;
}

.class-2 {
  @extend .class-1;
}

همچنین میتوانیم به صورت تو در تو (Nesting) بنویسیم:

/* SCSS */

article {
  p {
    line-height: 1.5;
  }
  img {
    max-width: 100%;
  }
  &__title {
     font-size: 15px;   
    }
}

نکته ای که در کد بالا وجود دارد، این است که کلاس article__title با سایز فونت 15px تعریف شده است. این کار بسیار پر کاربرد می باشد.

استفاده از پیش پردازنده های CSS مزایای بسیار دیگری نیز دارد که هنگام کار کردن با آن مواجه خواهید شد. از جمله این مزایا استفاده از function ها و جملات منطقی و همچنین import کردن فایل Scss/Sass داخل یک فایل دیگر می باشد.

این که از کدام Preprocessor استفاده کنید بستگی به خودتان دارد. در اکثر موارد Sass/Scss و Less یکسان می باشند. به هیچ عنوان مهم نیست کدوم بهتره، مهم اینه که قطعا یکی را انتخاب کنید و همین حالا شروع کنید.