Sass (Syntactically Awesome Stylesheets) یک CSS Preprocessor است که امکانات پیشرفته مانند متغیرها، توابع، Nesting، Mixins و ماژول‌ها را به CSS اضافه می‌کند و مدیریت پروژه‌های بزرگ را آسان می‌کند.

۱️⃣ معرفی Sass

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

  • SCSS: شبیه CSS، با {} و ;

  • Sass: بدون {} و ;، با indentation

• ویژگی‌ها:

  • متغیرها (Variables)

  • توابع و عملیات ریاضی

  • Nesting

  • Mixins و Includes

  • Extend / Inheritance

  • Partials و Import / Modules

۲️⃣ نصب Sass

🔹 نصب با npm

npm install -g sass

🔹 کامپایل Sass

sass style.scss style.css

🔹 حالت Watch برای بروزرسانی خودکار

sass --watch style.scss:style.css

۳️⃣ Variables (متغیرها)

• تعریف رنگ، اندازه و مقادیر ثابت

$primary-color: #3498db;
$font-stack: 'Roboto', sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;
}

۴️⃣ Nesting (تو در تو کردن)

• ساختار سلسله‌مراتبی CSS را ساده می‌کند

nav {
  ul {
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
      a {
        color: $primary-color;
        text-decoration: none;
      }
    }
  }
}

۵️⃣ Mixins

• تکه کدهای قابل استفاده مجدد

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

• Mixins می‌توانند پارامتر هم بگیرند

@mixin box($width, $height) {
  width: $width;
  height: $height;
}

.box1 {
  @include box(100px, 100px);
}

۶️⃣ Extend / Inheritance

• اشتراک قوانین بین سلکتورها

.message {
  padding: 10px;
  border: 1px solid #ccc;
}

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

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

۷️⃣ Functions (توابع)

• توابع سفارشی برای عملیات ریاضی و رنگ

@function double($n) {
  @return $n * 2;
}

.box {
  width: double(50px); // 100px
}

• Sass توابع داخلی هم دارد: lighten(), darken(), percentage(), round

۸️⃣ Partials و Modules

• فایل‌های جداگانه برای مدیریت بهتر

// _variables.scss
$primary-color: #3498db;

// style.scss
@use 'variables';
body {
  color: variables.$primary-color;
}

۹️⃣ Conditionals و Loops

• Sass امکان استفاده از @if, @for, @each, @while را دارد

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / 3 * $i;
  }
}

۱۰️⃣ Advanced Features

• Map و List برای داده‌های پیچیده

$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71
);

.button {
  background-color: map-get($theme-colors, primary);
}

• Interpolation برای تولید کلاس‌های داینامیک

$size: small;
.button-#{$size} { font-size: 12px; }

۱۱️⃣ نکات مهم

• استفاده از Sass باعث کد کوتاه‌تر، مدیریت بهتر و Maintenance آسان‌تر می‌شود

• SCSS رایج‌تر است زیرا شبیه CSS است

• ترکیب Variables + Mixins + Partials مناسب پروژه‌های بزرگ است

• می‌توان Sass را با Webpack, Gulp یا Vite هم کامپایل کرد