create variable with @for no scss

Question

create variable with @for no scss

Navigation

#1 by (0 votes)

1

Good morning everyone! I need to create color variables in SCSS and I'm doing it like this:

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

But I can not get it to work ... Koala, when compiling, always says that the problem is in the {$ i} ... how to concatenate ???? What can be done to create the variables ??? thank you all!! Horacio

sass scss

asked by anonymous 18.09.2018 / 05:32

1 answer

Error 1054 Laravel File link to view / download / print

score 0 · Answer 1

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

Code sample:

$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 @each instead of @for , because you do not need to know the size of the list or use the length() function to calculate the list size, as well as the nth() .

Code sample:

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