SCSS: به‌جای @import از @use و @forward استفاده کنید

اگر هنوز در پروژهٔ SCSS خود @import دارید، وقتش رسیده. تیم Sass آن را منسوخ کرده و جایگزین مدرنش سیستم ماژول با @use و @forward است.

@use با namespace

// _tokens.scss
$primary: #2563eb;
@mixin center { display: grid; place-items: center; }

// main.scss
@use "tokens";

.hero {
  color: tokens.$primary;
  @include tokens.center;
}

هر متغیر و میکسین با نام ماژول فراخوانی می‌شود؛ پس دو فایل مختلف دیگر نمی‌توانند ناخواسته نام یکدیگر را بازنویسی کنند. اگر namespace طولانی است می‌توانید کوتاهش کنید: @use "tokens" as t; یا با as * همه را بدون پیشوند بیاورید.

@forward برای فایل ورودی

// styles/_index.scss
@forward "tokens";
@forward "mixins";
@forward "functions";

// component.scss
@use "styles";

• ماژول‌ها فقط یک‌بار بارگذاری می‌شوند؛ دیگر خروجی تکراری نخواهید داشت.
• متغیرهای خصوصی را با پیشوند - یا _ مخفی کنید.
• فایل‌های ورودی (index) جای لیست طولانی import را می‌گیرند.