How to create a variable array with scss in VS community

Question

Good morning, I have a project on Ionic and in it I can configure a series of variables

$colors: (
  /*-CINZA:                   */  cinza1:        #595959, cinza2:        #7F7F7F, cinza3:        #A5A5A5, cinza4:        #CBCBCB, cinza5:        #F1F1F1, cinza9:        #999999,
  /*-COMPETÊNCIAS:            */  competencias1: #6D3B76, competencias2: #9C55A9, competencias3: #BA88C3, competencias4: #D7BBDD,
  /*-SUCESSÃO:                */  sucessao1:     #252049, sucessao2:     #40377E, sucessao3:     #5C4FB2, sucessao4:     #8D84C9,    
  /*-DESEMPENHO:              */  desempenho1:   #1B5486, desempenho2:   #287CC6, desempenho3:   #5CA1DE, desempenho4:   #9CC6EB,
  /*-MATRIZ DE AVALIAÇÃO:     */  matriz1:       #38AAC5, matriz2:       #72C4D7, matriz3:       #AEDDE8, matriz4:       #EAF6F9,
  /*-DIÁRIO DE BORDO:         */  diario1:       #819D3B, diario2:       #A7C461, diario3:       #C6D999, diario4:       #E5EED1,
  /*-ESTRUTURA ORGANIZACIONAL:*/  estrutura1:    #DBAC0A, estrutura2:    #F6CC3B, estrutura3:    #F9DF84, estrutura4:    #FDF2CD,
  /*-PESQUISA DE CLIMA:       */  pesquisa1:     #E76A38, pesquisa2:     #EF9D7C, pesquisa3:     #F7D0C0, pesquisa4:     #FDF2ED, 
  /*-RECRUTAMENTO E SELEÇÃO:  */  recrutamento1: #D15351, recrutamento2: #E18F8E, recrutamento3: #F1CBCA, recrutamento4: #FCF3F2,


  /*-Cores Comuns             */  branco: #ffffff, verde: #2eff2e, amarelo: #d4d400, vermelho: #ff2525, preto: #000000, sublinha: #c8c7cc,
);

this works fine in Ionic, use to create all visual classes, however, trying to use in visual studio I get an error unexpected character sequence

I am using a plug-in called Web-Compiller, it compiles scss for css, but I have faced problems with relations to these variables.

have already done a search and not found much on the subject, someone would have an idea what would be the right way to declare this array?

using the compiler itself available on official website with the above code I get no return, using it with the following additions I get an error

//Código utilizado
$colors: (
/*-CINZA:                   */ cinza1: #595959, cinza2: #7F7F7F, cinza3: #A5A5A5, cinza4: #CBCBCB, cinza5: #F1F1F1, cinza9: #999999,
/*-COMPETÊNCIAS:            */ competencias1: #6D3B76, competencias2: #9C55A9, competencias3: #BA88C3, competencias4: #D7BBDD,
/*-SUCESSÃO:                */ sucessao1: #252049, sucessao2: #40377E, sucessao3: #5C4FB2, sucessao4: #8D84C9,
/*-DESEMPENHO:              */ desempenho1: #1B5486, desempenho2: #287CC6, desempenho3: #5CA1DE, desempenho4: #9CC6EB,
/*-MATRIZ DE AVALIAÇÃO:     */ matriz1: #38AAC5, matriz2: #72C4D7, matriz3: #AEDDE8, matriz4: #EAF6F9,
/*-DIÁRIO DE BORDO:         */ diario1: #819D3B, diario2: #A7C461, diario3: #C6D999, diario4: #E5EED1,
/*-ESTRUTURA ORGANIZACIONAL:*/ estrutura1: #DBAC0A, estrutura2: #F6CC3B, estrutura3: #F9DF84, estrutura4: #FDF2CD,
/*-PESQUISA DE CLIMA:       */ pesquisa1: #E76A38, pesquisa2: #EF9D7C, pesquisa3: #F7D0C0, pesquisa4: #FDF2ED,
/*-RECRUTAMENTO E SELEÇÃO:  */ recrutamento1: #D15351, recrutamento2: #E18F8E, recrutamento3: #F1CBCA, recrutamento4: #FCF3F2,
/*-Cores Comuns             */ branco: #ffffff, verde: #2eff2e, amarelo: #d4d400, vermelho: #ff2525, preto: #000000, sublinha: #c8c7cc, );

@each $variavel in $colors{
        $variavel: str-slice(inspect($variavel), 1, (str-index(inspect($variavel), "#") - 2));

        .bg-#{$variavel}{
            background-color: color($colors, $variavel) !important;
         }

         .#{$variavel}{
            color: color($colors, $variavel) !important;
         }

         .border-#{$variavel}{
            border-color: color($colors, $variavel) !important;
         }

         .text-#{$variavel}{
            color: color($colors, $variavel) !important;
         }
    }



//retorno
(cinza1: #595959, cinza2: #7F7F7F, cinza3: #A5A5A5, cinza4: #CBCBCB, cinza5: #F1F1F1, cinza9: #999999, competencias1: #6D3B76, competencias2: #9C55A9, competencias3: #BA88C3, competencias4: #D7BBDD, sucessao1: #252049, sucessao2: #40377E, sucessao3: #5C4FB2, sucessao4: #8D84C9, desempenho1: #1B5486, desempenho2: #287CC6, desempenho3: #5CA1DE, desempenho4: #9CC6EB, matriz1: #38AAC5, matriz2: #72C4D7, matriz3: #AEDDE8, matriz4: #EAF6F9, diario1: #819D3B, diario2: #A7C461, diario3: #C6D999, diario4: #E5EED1, estrutura1: #DBAC0A, estrutura2: #F6CC3B, estrutura3: #F9DF84, estrutura4: #FDF2CD, pesquisa1: #E76A38, pesquisa2: #EF9D7C, pesquisa3: #F7D0C0, pesquisa4: #FDF2ED, recrutamento1: #D15351, recrutamento2: #E18F8E, recrutamento3: #F1CBCA, recrutamento4: #FCF3F2, branco: #ffffff, verde: #2eff2e, amarelo: #d4d400, vermelho: #ff2525, preto: #000000, sublinha: #c8c7cc) isn't a valid CSS value.
   ╷
19 │             background-color: color($colors, $variavel) !important;
   │                                     ^^^^^^^
   ╵
  stdin 19:37  root stylesheet on line 19 at column 37

Answer 1

To work I had to make use of a function that accesses the array, the map-get using it I was able to traverse the foreach

Example: map-get($colors, vermelho);

a better example of the code used above is this

@each $nome, $cor in $cores {
    .#{$nome} {
        color: $cor;
    }
}`