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