SASS چیست؟

Sass (Syntactically Awesome Style Sheets) یک پیش پردازنده CSS قدرتمند است که نوشتن کدهای CSS را برای شما آسان تر و سریعتر می کند. Sass به توسعه دهندگان کمک می کند تا کد DRY (خودت را تکرار نکن) بنویسند که نگهداری آن بسیار ساده تر از CSS سنتی است.

 برای درک اینکه Sass چگونه کار می کند، مهم است که برخی از مفاهیم کلیدی مانند متغیرها، nesting و mixins را درک کنید.

کاربردهای Sass:

Sass به شما امکان می‌دهد تا کدهای CSS خود را به صورت مدولار و قابل تنظیم ایجاد کنید. در ادامه به برخی از کاربردهای مهم Sass می‌پردازیم که به بهبود کیفیت کدهای استایل شما کمک می‌کنند. این کاربردها شامل موارد زیر می‌شوند:

    سازماندهی بهتر کدهای CSS: استفاده از nested rules در Sass به شما امکان می‌دهد تا کدهای CSS را به صورت ماژولار و مرتب تر نوشته و سازماندهی کنید.

    استفاده از متغیرها: تعریف متغیرها در Sass به شما امکان می‌دهد تا مقادیر تکراری مانند رنگها یا اندازه‌ها را یکبار تعریف کنید و در سراسر پروژه استفاده کنید.

    استفاده از میکسین‌ها: میکسین‌ها در Sass به شما امکان می‌دهند تا قطعات کد CSS را به صورت قابل استفاده مجدد تعریف کنید و در چندین مکان مختلف استفاده کنید.

    توابع: Sassاز توابع نیز پشتیبانی می‌کند که به شما امکان می‌دهند تا محاسبات پیچیده را در کدهای استایل انجام دهید

 

امکانات Sass:

1. متغیرها

با استفاده از متغیرها در Sass، می‌توانیم مقادیر را به صورت مرکزی تعریف کرده و در تمام کد خود استفاده کنیم. این بسیار مفید است زیرا اجازه می‌دهد تا مقادیر را در یک مکان تعریف کنیم و در سراسر کد خود  به صورت مرکزی عوض کنیم. کار با متغیرها یک راه عالی برای تمیز نگه داشتن کد  است. متغیرها به شما این امکان را می دهند که مقادیری را ذخیره کنید که می توان آنها را مجدداً در سرتاسر کد استفاده کرد، مانند رنگ ها، فونت ها، اندازه ها یا هر نوع متغییر دیگری که ممکن است نیاز به چندین بار ارجاع در بخش های مختلف داشته باشد. این کار را برای توسعه‌دهندگان در هنگام ایجاد تغییرات آسان‌تر می‌کند، زیرا تنها کاری که باید انجام دهند این است که یک مقدار را در یک مکان واحد به‌روزرسانی کنند، نه جستجوی دستی در میان صدها خط و تلاش برای یافتن هر نمونه‌ای که در آن مقدار یکسان استفاده شده است. برای مثال:

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: white;
}

تبدیل به کد زیر در CSS می‌شود:

.button {
  background-color: #007bff;
  color: white;
}

 

2. Nested

Sass به شما امکان می‌دهد تا کدهای CSS را به صورت nested و سازماندهی شده بنویسید. این کار باعث می‌شود که کد شما خواناتر و قابل فهم‌تر شود. به جای استفاده از کلاس‌های مختلف برای استایل دهی به عناصر درون یک عنصر والد، Sass به شما اجازه می‌دهد که به صورت nested کار کنید. به عنوان مثال:

$primary-color: #007bff;

.container {
  width: 100%;

  .button {
    background-color: $primary-color;
    color: white;
  }
}

به کد زیر در CSS تبدیل می‌شود:

.container {
  width: 100%;

}

.container .button {
   background-color: #007bff;
   color: white;
}

 

3. Mixins

Mixins در Sass به شما امکان می‌دهد بخشی از کد را با یک خط کد تعریف کنید و بعداً در سراسر پروژه استفاده کنید. این به شما امکان می‌دهد تا قوانین و استایل‌های مشترک را به صورت reusable و در یک جای مرکزی تعریف کنید. مزیت دیگری که mixins دارد این است که می‌توانید پارامترها را برای آنها تعریف کنید. برای مثال:

$primary-color: #007bff;
$secondary-color:#4584ff;

@mixin button-style($bg-color) {
  background-color: $bg-color;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

.button {
  @include button-style($primary-color);
}

.secondary-button {
  @include button-style($secondary-color);
}

تبدیل به کد زیر در CSS می‌شود:

.button {
   background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

.secondary-button {
    background-color: #4584ff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

 

 

4. Function

توابع ابزار قدرتمند دیگری است که توسط Sass ارائه شده است که منطق برنامه نویسی پیشرفته را در CSS امکان پذیر می کند. برای مثال:

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

.micro {
  width: sum(50px, 30px, 100px);
}

تبدیل به کد زیر می‌شود:

.micro {
  width: 180px;
}

همچنین خود Sass توابعی به صورت پیشفرض دارد که می‌توانید از آن‌ها استفاده کنید.

 

5.extend

اغلب در طراحی صفحات وب کلاس‌هایی وجود دارند که باید تمام استایل‌های کلاس دیگری را پیاده سازی کنید. این امکان در Sass با استفاده از extend قابل پیاده سازی است. برای مثال:

.error:hover {
  background-color: #fee;
}

.error--serious {
  @extend .error;
  border-width: 3px;
}

به کد زیر تبدیل می‌شود:

.error:hover, .error--serious:hover {
  background-color: #fee;
}

.error--serious {
  border-width: 3px;
}

 

این موارد تنها قسمتی از امکانات Sass بود. Sass  ویژگی‌های زیادی را ارائه می‌کند که فرآیند توسعه را آسان‌تر و کارآمدتر می‌کند، مانند متغیرها، nesting، mixins، functions و... که به تمیزی کد کمک می‌کنند.  همه اینها همراه با ادغام Sass با فریمورک‌هایی مانند Bootstrap  طراحی  را بسیار ساده تر می کند و به ما امکان می دهد قالب‌های خود را سریع بسازیم و در عین حال همه چیز را مرتب نگه داریم!