جلسه ششم – کامپایل فایل‌های Sass به CSS

۱. کامپایل Sass با Gulp

• از پکیج‌های sass و gulp-sass برای تبدیل فایل‌های .scss به .css استفاده می‌کنیم.
• نمونه کد Gulp:

import dartSass from "sass";
import gulpSass from "gulp-sass";
const sass = gulpSass(dartSass);
gulp.task("compile-sass", async function () {
  return gulp
    .src("src/assets/sass/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("dist/assets/css"));
});

• اجرای دستور:

gulp compile-sass

۲. هشدارها و دیپرکیشن‌ها

• Sass @import rules` منسوخ شده‌اند و در Dart Sass ≥3 حذف می‌شوند.
  • جایگزین‌ها: @use و @forward

۳. لینک CSS در HTML (روش حدس مسیر)

• پس از کامپایل Sass، فایل CSS در مسیر زیر ایجاد می‌شود:

dist/assets/css/style.css

• در HTML مسیر باید نسبت به فایل HTML خروجی در dist/ باشد:

<link rel="stylesheet" href="assets/css/style.css">

• نکته: مسیر لینک باید مسیر خروجی CSS را نسبت به محل HTML در dist حدس بزند، نه مسیر اصلی src.

۴. نکات تکمیلی

• Gulp می‌تواند همزمان HTML، JS، تصاویر و CSS را مدیریت کند.
• در صورت وجود خطا در کامپایل Sass، با sass.logError خطا نمایش داده می‌شود بدون توقف فرآیند Gulp.
• مسیرهای src و dest در Gulp مهم هستند و باید با ساختار پروژه هماهنگ شوند.