Variáveis CSS

Variáveis CSS são entidades definidas por desenvolvedores, contendo valores específicos para serem reutilizados ao longo da folha de estilo. São configuradas usando esta notação (ex: –cor-principal: black; ) e são acessadas usando a funcão var() (ex: color: var(–cor-principal); ).

/* Declarando as váriaveis */
:root {
 --primarycolor: black;
 --secondarycolor: green;
}
/* Usando as váriaveis */
body {
 background: var(--primarycolor);
 color: white;
}
body p {
 background: var(--secondarycolor);
}

Uso básico

No exemplo anterior foram declaradas duas variáveis dentro do seletor :root, que é a raiz do documento, ele pegará a página toda, declarando nesse seletor as variáveis surtirão efeito na página toda.

No código foram declarado as variáveis –primarycolor e –secondarycolor em seguida no body da página eu adicionei um background com o var(–primarycolor) deixando o fundo do body da cor preta e com o texto em branco. Os parágrafos ficarão com a cor verde usando o var(–secondarycolor).

Usando nosso exemplo anterior, para usar uma variável precisará envolver o valor declarado no :root dentro da função var().

a {
 color: var(--secondarycolor);
}

No código acima nossos links ficarão com a cor verde.

Dicas

As variáveis são sensíveis a maiúscula e minúscula, as variáveis –secondarycolor e –Secondarycolor são consideradas diferentes.

Diretiva !important
Essa diretiva não invalida o valor da variável declarada, porém não altera o efeito cascata e nem a especificidade da regra CSS, portanto, não cumpre com sua finalidade e não deve ser usada.