0

Bom dia, tenho um projeto no Ionic e nele posso configurar uma série de variáveis

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

isso funciona direitinho no Ionic, uso para criar todas as classes visuais, porém, tentando usar no visual studio recebo um erro unexpected character sequence

estou usando um plug-in chamado Web-Compiller, ele compila o scss para css, porém venho enfrentados problemas com relações a essas variáveis.

já dei uma pesquisada e não achei muita coisa sobre o assunto, alguém teria uma ideia de qual seria a maneira certa de declarar esse array?

utilizando o próprio compilador disponível no site oficial com o código acima não obtenho retorno nenhum, utilizando ele com as adições abaixo obtenho um erro

//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

1 Resposta 1

0

Para funcionar tive que fazer o uso de uma função que acessa o array, o map-get usando ele fui capaz de percorrer o foreach

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

um exemplo melhor do código utilizado acima é esse

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .