Mapa como fuente de verdad
1
En lugar de declarar cientos de variables planas, organiza tokens en mapas por categoría.
2
Así mejoras lectura, reduces ruido y facilitas evolución de marca o temas.
Sass
08
Mapas Sass y design tokens reutilizables
Gestiona paletas, spacing y escalas con mapas Sass para construir un sistema de diseño coherente y fácil de evolucionar.
Código del tema: $colors: (primary: #2563eb);
📘 Teoría
Acceso a tokens con map.get
1
Extrae valores con map.get para mantener llamadas explícitas y evitar acoplamiento implícito.
2
Cuando un token no exista, define fallback o validación en tu función helper.
Mapa de color + spacing
@use "sass:map";
$colors: (
primary: #4f46e5,
danger: #dc2626
);
$space: (
sm: .5rem,
md: 1rem,
lg: 1.5rem
);
.alert {
color: map.get($colors, danger);
padding: map.get($space, md);
}