create variable with @for in scss

Question

Good morning to all!! Guys I need to create color variables in SCSS and I’m doing it as follows:

 @for $i from 1 to 50{
  $corClara{$i}:red;
}

but I can’t make it work...Koala, when compiling, always says that the problem is in {$i}...has how to concatenate???? What can be done to create variables??? thank you all!! Horatio

Answer 1

A suggestion would be, instead of generating variable names using interpolation, you could create a list and use the method nth to obtain the values.

Code example:

$cor1: rgb(255,255,255); // branco
$cor2: rgb(255,0,0); // vermelho
$cor3: rgb(255,255,0);   // amarelo

$cores: $cor1, $cor2, $cor3;

@for $i from 1 through length($cores) {
        background-color: rgba(nth($cores, $i), 0.6);
}

Another approach would be to use the @each instead of the @for, because then you don’t need to know the list size or use the function length() to calculate the list size, as well as the function nth().

Code example:

$cores: rgb(255,255,255), // branco
        rgb(255,0,0),     // vermelho
        rgb(255,255,0);   // amarelo

@each $cor in $cores {
        background-color: rgba($cor, 0.6);
}