1

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.

0

1 respuesta 1

1

Una alternativa es utilizar Sass Maps. Proveen justo la caracteristica que necesitas, una lista de elementos con nombre y tiene menos boilerplate.

$colores: (
 rojo: #aa0000,
 verde: #168816,
 azul: #2222aa
);

@each $nombre-color, $color-actual in $colores {
  .fondo-#{$nombre-color} {
    background: $color-actual;
  }
}
2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.