0

Gostaria de saber se existe a possibilidade de informar valores através de nome de classes para ser usados como valores nas propriedades das mesmas. Exemplo:

.text-(color) {
color: (color);
}

O resultado seria:

.text-blue {
color: blue;
}

Eu li sobre pré-processadores, eu nunca havia utilizado, mas até então não encontrei nada que se refira a solução dessa dúvida. Somente uma solução parecida que ainda não é suportada por nenhum navegador: https://css-tricks.com/css-attr-function-got-nothin-custom-properties/#article-header-id-2

1

1 Resposta 1

6

Com CSS puro vc pode fazer usando custom variables, não é exatamente como vc quer mas pode te ajudar

Caso queira uma cor especial para o :hover, basta no :root vc tb declarar uma cor que vai usar no :hover, no caso a var(--red), e no p.azul:hover vc muda o valor de --azul para var(--red) 😉

Veja o exemplo para entender melhor:

:root {
  --azul: blue;
  --red: red; /* cor do hover */
}

p.azul {
  color: var(--azul);
}

p.azul:hover {
  --azul: var(--red); /* muda a var Azul para ser a var da cor do Hover */
}
<p>lorem lorem</p>
<p class="azul">lorem lorem 1</p>
<p class="azul">lorem lorem 2</p>

8
  • Putz legal isso aí hein, não conhecia.
    – LeAndrade
    21/02/2020 às 16:14
  • 1
    @LeAndrade bem massa né, e eh nativo do CSS, não precisa compilar, e já tem um bom suporte dos browsers
    – hugocsl
    21/02/2020 às 16:24
  • Boa, muito bom também não conhecia. Mas se eu quiser informar o nome da cor dinamicamente? Tipo o nome que houver na classe assumir o valor da propriedade color? Era isso que gostaria de saber. 21/02/2020 às 16:47
  • @RodrigoAlves veja a edição e os comments que deixei no código da resposta. Como falei essa é uma abordagem com CSS puro
    – hugocsl
    21/02/2020 às 17:09
  • 1
    valeu @hugocsl, obrigado pela alternativa! 21/02/2020 às 20:42

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 .