Variáveis

Variáveis CSS, também conhecidas como propriedades personalizadas CSS, oferecem uma maneira de definir valores reutilizáveis em todo o código CSS. Ao utilizar variáveis, é possível criar designs dinâmicos e flexíveis, facilitando a manutenção e atualização.

Para declarar uma variável, utiliza-se a pseudo-classe :root no início do arquivo CSS e adiciona-se o prefixo -- ao nome da variável. Por exemplo, para definir uma variável --blue-color com o valor #3f42f3 no bloco :root:

:root {
  --blue-color: #3f42f3;
}

Após declarar uma variável, é possível aplicá-la a qualquer propriedade CSS utilizando a função var(). Por exemplo, para atribuir à propriedade color de um elemento <h1> o valor da variável --blue-color, pode-se escrever:

h1 {
  color: var(--blue-color);
}

A seguir, a combinação do conhecimento sobre declaração e uso de variáveis no exemplo abaixo:

Neste exemplo, definimos e aplicamos cinco variáveis a quaisquer propriedades. Ao alterar os valores dessas variáveis, é possível atualizar facilmente as cores em toda a folha de estilos.

Sobrescrevendo Propriedades

Em alguns casos, é necessário sobrescrever propriedades específicas no CSS para obter a estilização desejada. Isso pode ser feito declarando uma propriedade com o mesmo nome dentro de um seletor aninhado e atribuindo um novo valor.

Considere o exemplo a seguir de um semáforo com diferentes sinais de cor:

Ao direcionar as classes de sinal específicas, é possível ajustar a cor de cada sinal enquanto se mantêm os estilos compartilhados definidos no seletor base .signal.

Nota

Em conclusão, variáveis CSS oferecem flexibilidade e facilidade de manutenção, permitindo atualizações dinâmicas de design, enquanto a sobrescrição de propriedades possibilita o ajuste fino dos estilos e a obtenção dos efeitos visuais desejados.