dúvida resolvida SASS - Concatenação de variáveis

[Luiiiz]

Eu possuo uma sequência de variáveis com cores hexagonal em um arquivo externo o qual está sendo importado para o style.scss. Para não ter o trabalho de recriar todos os códigos e adicionar a variável referente, eu pensei em criar um @for para fazer isso automaticamente para mim. Estou tendo um problema para com isso. A questão da concatenação. Não consigo achar outra forma, ou achar a resposta para consertar esse erro. Se puder me ajudar, ficarei agradecido

 

Siga o exemplo abaixo:

SASS

$red9: #86181D;
$red8: #9E1C23;
$red7: #B31D28;
$red6: #CB2431;
$red5: #D73A49;
$red4: #EA4A5A;
$red3: #F97583;
$red2: #FDAEB7;
$red1: #FFDCE0;
$red0: #FFEEF0;
$red: #D73A49;

@for $i from 0 through 9 {
  .bg-red#{$i} {
    background-color: $red#{$i};
  }
}

 

Compilado

 

.bg-red0{background-color:#d73a49 0}
.bg-red1{background-color:#d73a49 1}
.bg-red2{background-color:#d73a49 2}
.bg-red3{background-color:#d73a49 3}
.bg-red4{background-color:#d73a49 4}
.bg-red5{background-color:#d73a49 5}
.bg-red6{background-color:#d73a49 6}
.bg-red7{background-color:#d73a49 7}
.bg-red8{background-color:#d73a49 8}
.bg-red9{background-color:#d73a49 9}

 

[Luiiiz]

Pode fechar

[Wolf_131]

Sua dúvida foi marcada como resolvida pela nossa equipe. Caso sua dúvida não tenha sido sanada, crie outro tópico.

OBS: Essa mensagem é automática.