Estoy trabajando con SASS y tengo una lista de colores grande que debo probar (y que puede cambiar más adelante). Defino los colores en sus variables, dos listas con los colores y sus nombres, y estoy realizando un bucle con @each
para generar las clases de prueba.
El código se ve así (simplificado, realmente hay docenas de colores):
$rojo: #aa0000;
$verde: #168816;
$azul: #2222aa;
$color-variables: $rojo $verde $azul;
$color-nombres: 'rojo' 'verde' 'azul';
.fondo {
@each $color-actual in $color-variables {
$i: index($color-variables, $color-actual);
&-#{nth($color-nombres, $i)} {
background: #{$color-actual};
}
}
}
Que me genera las siguientes reglas:
.fondo-rojo {
background: #aa0000;
}
.fondo-verde {
background: #168816;
}
.fondo-azul {
background: #2222aa;
}
Aunque el código en sí funciona, tiene dos listas de valores similares con el mismo nombre y en el mismo orden: color-variables
y color-nombres
, cuya única diferencia es que en una son variables y en la otra son cadenas literales pero el "texto" es el mismo. Esto dificulta la modificación y mantenimiento del contenido en el futuro, por lo que sería mejor tener una sola lista.
¿Es posible obtener un resultado similar pero con una única lista de valores? Por ejemplo, tener sólo la cadena con los literales y aplicar alguna función similar al eval
de JavaScript y otros lenguajes de programación.