Evaluate variable in SASS

Question

Evaluate variable in SASS

Navigation

#1 by (1 votes)

1

I'm working with SASS and I have a large color list that I need to try (and that can be changed later). I define the colors in their variables, two lists with the colors and their names, and I'm doing a loop with @each to generate the test classes.

The code looks like this (simplified, there are really dozens of colors):

$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};
        }
    }
}

That generates the following rules:

.fondo-rojo {
    background: #aa0000;
}

.fondo-verde {
    background: #168816;
}

.fondo-azul {
    background: #2222aa;
}

Although the code itself works, it has two lists of similar values with the same name and in the same order: color-variables and color-nombres , whose only difference is that in one they are variables and in the other they are literal strings but the "text" is the same. This makes it difficult to modify and maintain the content in the future, so it would be better to have only one list.

Is it possible to obtain a similar result but with a single list of values? For example, have only the string with the literals and apply some function similar to eval of JavaScript and other programming languages.

css sass scss

asked by Alvaro Montoro 16.05.2017 в 14:49

source

1 answer

Why when I upload my page made with php I get an error in linux and in windows if it loads correctly? Fix a Column in Html

score 1 · Accepted Answer

An alternative is to use Sass Maps. They provide just the feature you need, a list of named items and have less boilerplate.

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

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