Sass Tutorial

Sass یکی از محبوب‌ترین پیش‌پردازنده‌های CSS است که باعث می‌شود نوشتن CSS ساختارمندتر، سریع‌تر و قابل نگهداری‌تر شود.

🧩 بخش ۱: Sass چیست؟

Sass زبانی است که بر پایه‌ی CSS ساخته شده و امکاناتی اضافه می‌کند، مثل:

در نهایت Sass به CSS خالص کامپایل (compile) می‌شود و مرورگر همان CSS نهایی را اجرا می‌کند.

npm install -g sass

sass input.scss output.css

یا برای نظارت خودکار روی تغییرات:

sass –watch input.scss output.css

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

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

2. Nesting (تودر‌تویی)

nav {
ul {
list-style: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
}
}

تبدیل به:

nav ul { list-style: none; }
nav li { display: inline-block; }
nav a { text-decoration: none; }

3. Mixins (الگوهای قابل‌استفاده مجدد)

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

.container {
@include flex-center;
}

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

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

5. عملگرها (Operators)

.container {
width: 100% – 20px;
}

.box {
width: (600px / 2);
}

برای تقسیم کد به فایل‌های جدا:

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

// main.scss
@use ‘variables’;

body {
color: variables.$primary-color;
}

🧮 بخش ۴: توابع در Sass

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

.box {
width: double(10px); // نتیجه: 20px
}

📦 بخش ۵: ساختار پروژه پیشنهادی

scss/
├── _variables.scss
├── _mixins.scss
├── _base.scss
├── _layout.scss
├── _components.scss
└── main.scss

در main.scss همه را با @use یا @import فراخوانی می‌کنید.