Cuándo merece la pena automatizar
1
Si repites el mismo patrón con variaciones predecibles, un bucle puede ahorrar tiempo y errores.
2
Si solo hay 2-3 casos aislados, probablemente escribir reglas explícitas sea más mantenible.
Sass
09
Bucles Sass: @each, @for y @while con control
Automatiza utilidades y variantes con bucles Sass sin sobreproducir clases innecesarias en el CSS final.
Código del tema: Arquitectura Sass escalable
📘 Teoría
@each para utilidades controladas
1
Con @each recorres listas de valores o mapas de pares clave-valor para crear clases consistentes.
2
Prefiere nombres semánticos y un conjunto corto de utilidades.
Generador simple de gaps
$spaces: (xs: .25rem, sm: .5rem, md: 1rem, lg: 1.5rem);
@each $name, $value in $spaces {
.gap-#{$name} {
gap: $value;
}
}