Como usar custom properties para armazenar e reutilizar valores em todo o CSS
As variáveis CSS, também chamadas de custom properties, permitem armazenar valores e reutilizá-los ao longo de todo o arquivo de estilo. Quando você precisa mudar uma cor ou um espaçamento que aparece em vários lugares, basta alterar o valor da variável em um único ponto.
Variáveis são declaradas com dois hífens antes do nome. O lugar mais comum para declará-las é no seletor :root, que representa o elemento raiz do documento, tornando-as disponíveis em qualquer parte do CSS.
Carregando...Para usar uma variável, chame a função var() com o nome dela.
Carregando...A função var() aceita um segundo argumento como valor de fallback, usado caso a variável não esteja definida.
Carregando...Variáveis não precisam estar obrigatoriamente no :root. Quando declaradas em um seletor específico, só valem dentro dele e nos seus filhos.
Carregando...Uma das aplicações mais poderosas das variáveis CSS é criar suporte a tema escuro de forma organizada.
Carregando...Com isso, todo o estilo que usa as variáveis se adapta automaticamente ao tema do sistema operacional.
Sem variáveis, uma cor que aparece em 20 lugares do CSS precisa ser alterada 20 vezes. Com variáveis, você muda em um lugar só. Isso torna o código mais fácil de manter e mais resistente a erros.