پیش‌پردازنده‌ها در CSS (SASS و LESS)

پیش‌پردازنده‌های CSS مانند SASS و LESS ابزاری قدرتمند برای سازمان‌دهی، بازاستفاده و نگهداری استایل‌ها در پروژه‌های کوچک و بزرگ هستند. آن‌ها امکاناتی مثل متغیرها، توابع، میکسین‌ها، و ساختار مدولار ارائه می‌دهند که نوشتن CSS را سریع‌تر، خواناتر و قابل نگهداری‌تر می‌کند.

چرا از پیش‌پردازنده‌ها استفاده کنیم؟

• کاهش تکرار با متغیرها و میکسین‌ها
• سازمان‌دهی بهتر با partials و ماژول‌ها
• امکان استفاده از منطق (حلقه، شرط) برای تولید CSS پویا
• قابلیت نگهداری در پروژه‌های بزرگ و تیمی
• ترکیب بهتر با ابزارهای مدرن (build tools، bundlers)

SASS — امکانات کلیدی و نمونه‌ها

SASS دو سینتکس دارد: SCSS (شبیه CSS عادی) و indented (سینتکس قدیمی). اینجا از SCSS استفاده می‌کنیم که رایج‌تر است. SASS امکاناتی مثل میکسین، توابع، نقشه‌ها (maps) و ماژول‌ها (@use / @forward) را دارد.

// styles/_variables.scss
$primary: #3498db;
$radius: 4px;

// styles/_buttons.scss
@use 'variables';

.button {
  background: variables.$primary;
  border-radius: variables.$radius;
  padding: 0.5rem 1rem;
  color: white;

  &:hover { opacity: 0.9; }
}

// styles/main.scss
@use 'variables';
@use 'buttons';

توضیح: در این مثال از ساختار partials استفاده شده است—فایل‌هایی با پیشوند زیرخط (_) که به کمک @use در فایل اصلی وارد می‌شوند. @use نام‌فضا ایجاد می‌کند که از تداخل جلوگیری می‌کند. این الگوی مدولار برای پروژه‌های بزرگ بسیار مفید است.

// mixins and map usage
$themes: (
  light: (bg: #fff, color: #333),
  dark:  (bg: #222, color: #eee)
);

@mixin theme($name) {
  $cfg: map-get($themes, $name);
  background: map-get($cfg, bg);
  color: map-get($cfg, color);
}

.card {
  @include theme(light);
}

توضیح: این قطعه نشان می‌دهد چگونه با mapها و میکسین‌ها می‌توان تم‌های مختلف را تعریف و مجدداً استفاده کرد. map-get برای خواندن مقدار داخل map کاربرد دارد و mixin به‌عنوان یک الگوی قابل بازفراخوانی عمل می‌کند.

LESS — امکانات کلیدی و نمونه‌ها

LESS به‌خاطر شباهت زیاد سینتکسش به CSS و قابلیت اجرا در محیط Node.js محبوب است. متغیرها، میکسین‌ها و توابع در LESS نیز وجود دارند، ولی مدیریت ماژول‌ها و سیستم جدیدی مثل @use در SASS به شکل متفاوتی پیاده‌سازی شده‌است.

// variables.less
@primary: #e74c3c;
@radius: 6px;

// buttons.less
@import "variables";

.button {
  background: @primary;
  border-radius: @radius;
  padding: 10px 16px;

  &:hover { opacity: 0.85; }
}

// example of parametric mixin
.rounded(@r) {
  border-radius: @r;
}
.box { .rounded(8px); }

توضیح: در LESS متغیرها با @ مشخص می‌شوند و میکسین‌ها می‌توانند پارامتر بگیرند. @import در LESS نحوهٔ ترکیب فایل‌ها را مشخص می‌کند (در زمان کامپایل داخلی ترکیب می‌شود).

مقایسه خلاصه SASS و LESS

نکات حرفه‌ای و بهترین شیوه‌ها

• از ساختار مدولار (partials) استفاده کنید تا فایل‌ها قابل نگهداری بمانند.
• از نامگذاری معنادار برای متغیرها مثل $color-primary یا @color-primary استفاده کنید.
• عمق تو در تو شدن را محدود کنید — هرچه کمتر، CSS نهایی قابل‌پیش‌بینی‌تر است.
• برای استایل‌های مشترک از mixin یا @extend (در SASS) استفاده کنید اما مراقب تکرار کد در خروجی باشید.
• از source maps در حالت توسعه استفاده کنید تا دیباگ در مرورگر آسان باشد.
• برای بهینه‌سازی خروجی از فشرده‌سازی و ابزارهای حذف CSS بدون استفاده (مثل PurgeCSS) بهره بگیرید.
• پیش‌پردازنده را به‌عنوان ابزاری برای تولید کُد تمیز ببینید؛ نه بهانه‌ای برای تولید CSS نامنظم.

مثال کامپایل و بهینه‌سازی

// CLI command for Dart Sass
sass --watch styles/main.scss:public/css/main.css --style=compressed --no-source-map

توضیح: این دستور فایل SCSS را تماشا می‌کند و هنگام تغییر آن‌را به CSS فشرده تبدیل می‌کند. در حالت توسعه بهتر است گزینه source map را فعال نگه دارید (حذف –no-source-map) تا اشکال‌زدایی آسان‌تر باشد.

جمع‌بندی و انتخاب بین SASS و LESS

اگر پروژهٔ شما به ماژولاریتی پیشرفته، توابع گسترده و یک اکوسیستم بزرگ نیاز دارد، SASS (به‌خصوص Dart Sass با @use) معمولاً انتخاب بهتری است. اگر تیم شما از ابزارهای Node.js استفاده می‌کند و سینتکس سبک‌تر برایتان مهم است، LESS می‌تواند مناسب باشد. در انتخاب، به تیم، ابزارهای توسعه و نیازهای پروژه توجه کنید.

در پایان، مهم‌ترین نکته این است که هر پیش‌پردازنده‌ای که انتخاب می‌کنید، باید به نظم کد، خوانایی و فرآیند build شما کمک کند. از امکانات آن برای ساده‌سازی و استانداردسازی استایل‌ها استفاده کنید، اما همیشه خروجی نهایی CSS و عملکرد را در نظر داشته باشید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال