مپ‌های SCSS برای طراحی توکن‌ها؛ تولید خودکار کلاس‌ها با @each

به‌جای ده‌ها متغیر پراکنده، رنگ‌ها و فاصله‌ها را در یک map نگه دارید. SCSS با @each می‌تواند از روی همین map کلاس‌ها یا متغیرهای CSS تولید کند.

تعریف و تولید

@use "sass:map";

$colors: (
  "primary": #2563eb,
  "success": #16a34a,
  "danger":  #dc2626,
);

:root {
  @each $name, $value in $colors {
    --color-#{$name}: #{$value};
  }
}

.btn-danger {
  background: map.get($colors, "danger");
}

خروجی CSS شامل متغیرهای --color-primary و بقیه است؛ پس هم در SCSS و هم در جاوااسکریپت یا CSS معمولی قابل استفاده‌اند.

تابع کمکی برای فاصله‌ها

@use "sass:math";

@function rem($px, $base: 16) {
  @return math.div($px, $base) * 1rem;
}

.card { padding: rem(24); }

• برای تقسیم از math.div استفاده کنید؛ عملگر / برای تقسیم منسوخ شده است.
• اگر کلیدی در map وجود نداشته باشد، map.get مقدار null می‌دهد؛ برای خطای واضح‌تر یک @error بنویسید.