Utilizando variáveis no CSS

Variáveis CSS são uma forma de armazenar valores que podem ser reutilizados em uma folha de estilo. Elas permitem que você defina um estilo em um lugar e aplique-o a vários elementos ou seletores. Por exemplo, você pode criar uma variável chamada `--cor-principal` e atribuir-lhe um valor hexadecimal, como `#ff0000`. Depois, você pode usar essa variável em qualquer lugar que quiser usar essa cor, como na propriedade `color` ou `background-color`.

Benefícios de Utilizar Variáveis no CSS

Facilidade na Manutenção do Código

Quando usamos variáveis, torna-se simples modificar cores, tamanhos ou outros detalhes. Mudamos apenas o valor da variável e isso se reflete em todos os lugares onde a usamos.

Consistência e Reusabilidade

Com as variáveis, garantimos que o estilo seja consistente em todo o site. Podemos reutilizar um valor em diferentes partes do código, evitando repetições desnecessárias.

Para declarar uma variável CSS, você usa um nome que começa com dois hifens (`--`) e atribui-lhe um valor com o operador `:`. Você pode declarar variáveis no escopo global, usando o seletor `:root`, ou no escopo local, dentro de uma regra CSS específica.

Exemplo:

:root {
  --cor-primaria: #FFA500;
}

.elemento {
  color: var(--cor-primaria);
}

Suponha que você queira definir uma cor principal para todo o seu site e reutilizá-la em vários elementos. Você pode criar uma variável para essa cor e utilizá-la em todo o seu código CSS.

Exemplo:

/* Declaração da variável */
:root {
  --cor-principal: #336699; /* Defina aqui a cor desejada */
}

/* Utilização da variável */
body {
  background-color: var(--cor-principal);
}

.header {
  color: var(--cor-principal);
}

.button {
  background-color: var(--cor-principal);
  border: 2px solid var(--cor-principal);
}

/* Reatribuição dinâmica do valor da variável */
:root {
  --cor-principal: #FFA500; /* Mudança da cor principal para laranja */
}

Neste exemplo, --cor-principal é a variável que armazena a cor #336699. Essa cor é utilizada no fundo do corpo da página, na cor do texto do cabeçalho (.header) e também no estilo de botões (.button). Posteriormente, a cor principal é dinamicamente alterada para #FFA500, resultando em uma mudança global na cor dos elementos que a utilizam.

Dessa forma, as variáveis CSS oferecem flexibilidade ao permitir que valores comuns sejam definidos uma vez e utilizados em diversos lugares, facilitando a manutenção e alterações no estilo do site.