Variáveis

Variáveis CSS (propriedades personalizadas) permitem armazenar valores reutilizáveis, facilitando a atualização e manutenção dos estilos.

Declare variáveis no seletor :root e prefixe-as com --:

: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, utilize:

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, várias variáveis controlam as cores do cartão. Atualizar uma única variável atualiza os estilos em todos os lugares em que ela é usada.

Sobrescrevendo Propriedades

Para alterar estilos específicos dentro de um componente, redefina a mesma propriedade dentro de um seletor mais específico.

Exemplo (semáforo):

A classe base .signal contém estilos compartilhados, enquanto .stop, .slow-down e .proceed substituem as cores individuais.