تفاوت بین CSS، SASS و SCSS چیست؟

خیلی کوتاه تفاوت بین CSS، SASS و SCSS با ذکر یک مثال ساده بدانید . برای یادگیری عمیق SCSS و SASS شما باید آموزش های تخصصی این دوره ها را ببینید.

CSS

CSS مخفف عبارت Cascading Style Sheets است. قبل از CSS، هیچ گونه جدایی رسمی بین کدی که ظاهر یک صفحه وب را تعریف می‌کند و محتوایی که در آن صفحه وب ظاهر می‌شود وجود نداشت. این عدم تفکیک، به روز رسانی ظاهر یک صفحه وب را دشوار می کرد، زیرا برای یافتن و تغییر فونت ها، رنگ ها، حاشیه ها و هر چیز دیگری باید همه جا را جستجو می کردید.

SASS

SASS مخفف عبارت Syntactically Awesome Style Sheets است. در سال 2006، SASS برای حل مشکل تکرار بیش از حد در CSS با اجازه دادن به متغیرها، تودرتو و میکسین ها (گروهی از سبک های از پیش تعریف شده) توسعه یافت. SASS همچنین ویژگی های برنامه ای مانند آرگومان ها، حلقه ها و منطق شرطی را اضافه کرد. نویسندگان SASS همچنین تصمیم گرفتند تا با حذف نیاز به نقطه ویرگول و بریس های فرفری، نحو را کمی تغییر دهند. در عوض، نحو "حساس به فضای سفید" است و باید دارای تورفتگی مناسب باشد. SASS یک "پیش پردازنده" CSS است و CSS سنتی را خروجی می دهد، بنابراین هر مرورگر کمی مدرن می تواند آن را پیاده سازی کند.

SCSS

SCSS مخفف Sassy CSS است و یک نحو جدیدتر برای SASS است. این به سادگی CSS با ویژگی های مشابه SASS است، اما دقیقاً مانند CSS به نقطه ویرگول و بریس های مجعد نیاز دارد. در واقع، شما می توانید هر فایل CSS را با تغییر نوع doc از .css به .scss به SCSS تبدیل کنید زیرا SCSS پسوندی از سینتکس CSS است.

مثال 
در اینجا یک مثال را در CSS ، SASS و SCSS بررسی می کنیم.

CSS

.button.danger {
  border: 1px solid black;
  background: hsl(0, 100%, 50%);
}

.button.warning {
  border: 1px solid black;
  background: hsl(60, 100%, 50%);
}

SASS

$red: hsl(0, 100%, 50%)
$yellow: hsl(60, 100%, 50%)
$neutral: hsl(0, 0%, 0%)

=myBtn($bdr, $bg) 
  border: 1 px solid $bdr
  background: $bg

button 
  danger 
    +myBtn($neutral, $red)

  warning 
    +myBtn($neutral, $yellow)

SCSS

$red: hsl(0, 100%, 50%);
$yellow: hsl(60, 100%, 50%);
$neutral: hsl(0, 0%, 0%);

@mixin myBtn($bdr, $bg) {
  border: 1 px solid $bdr;
  background: $bg;
}

button {
  danger {
    @include myBtn($neutral, $red);
  }
  warning {
    @include myBtn($neutral, $yellow);
  }
}