Declarando e usando Variáveis CSS: --nome-da-variavel e var()

Aprenda a definir e aplicar variáveis em seu código.

Na lição anterior, você entendeu o que são as Variáveis CSS (ou Custom Properties) e por que elas são tão úteis. Agora, vamos colocar a mão na massa e aprender como declará-las e, mais importante, como usá-las no seu código CSS.

É como aprender a dar um nome para a sua "caixinha" de tinta e depois saber como pegar a tinta de dentro dela para pintar as paredes!

Declarando uma Variável CSS: --nome-da-variavel

Para criar uma variável CSS, você precisa seguir duas regras principais:

  1. Prefixo --: Toda variável CSS deve começar com dois hífens (--). Isso é o que a diferencia de outras propriedades CSS e indica ao navegador que se trata de uma Custom Property.
    • Exemplos: --cor-primaria, --espacamento-padrao, --tamanho-fonte-h1.
  2. Escopo: Você precisa declarar a variável dentro de um seletor CSS. Onde você a declara define o "alcance" ou "escopo" da variável.

Escopo Global (:root)

A forma mais comum de declarar variáveis que você quer usar em qualquer lugar do seu documento é dentro do seletor :root.

  • O seletor :root representa o elemento raiz do documento (geralmente o <html>).
  • Variáveis declaradas em :root são acessíveis em todo o documento HTML.
/* Declarando variáveis globais dentro de :root */
:root {
  --cor-principal: #007bff; /* Azul */
  --cor-secundaria: #6c757d; /* Cinza */
  --espacamento-padrao: 16px;
  --fonte-titulo: 'Arial', sans-serif;
}

Escopo Local (dentro de um elemento específico)

Você também pode declarar variáveis dentro de qualquer outro seletor CSS. Nesse caso, a variável só será acessível dentro daquele elemento e de seus elementos filhos.

.card {
  --cor-fundo-card: #f8f9fa; /* Fundo claro para o card */
  --borda-card: 1px solid #dee2e6;
  padding: var(--espacamento-padrao); /* Usando uma variável global */
}

.card-header {
  --cor-texto-header: var(--cor-principal); /* Usando uma variável global para definir uma local */
  color: var(--cor-texto-header);
  font-size: 1.2em;
}

Neste exemplo, --cor-fundo-card só pode ser usada dentro de .card e seus filhos.

Usando uma Variável CSS: var()

Para usar o valor de uma variável CSS, você utiliza a função var().

Sintaxe: var(--nome-da-variavel, valor-de-fallback)

  • --nome-da-variavel: O nome da variável que você declarou.
  • valor-de-fallback (opcional): Um valor alternativo que será usado caso a variável não seja encontrada ou não esteja definida. Isso é útil para garantir que seu CSS tenha um valor de segurança.

Exemplos de Uso:

/* Usando as variáveis declaradas em :root */
body {
  font-family: var(--fonte-titulo); /* Usando a fonte definida globalmente */
  margin: 0;
  padding: var(--espacamento-padrao);
}

h1 {
  color: var(--cor-principal); /* O título será azul */
  font-size: 2.5em;
}

button {
  background-color: var(--cor-principal); /* O botão também será azul */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: var(--espacamento-padrao);
}

/* Exemplo de fallback */
.elemento-com-fallback {
  /* Se --cor-inexistente não for encontrada, usará 'black' */
  color: var(--cor-inexistente, black);
  /* Se --cor-secundaria for encontrada, usará seu valor. Se não, usará 'gray'. */
  background-color: var(--cor-secundaria, gray);
}

Benefícios na Prática:

Com este sistema de declaração e uso, você pode:

  • Mudar o tema: Altere --cor-principal em :root e veja todos os elementos que a usam mudarem de cor instantaneamente.
  • Manter a consistência: Garanta que todos os espaçamentos ou tamanhos de fonte sigam um padrão definido por suas variáveis.
  • Facilitar a leitura: Nomes descritivos como --cor-fundo-claro são muito mais claros do que um código hexadecimal.

Agora você sabe como criar suas próprias "caixinhas" de valores e como usá-las para construir um CSS mais inteligente e fácil de gerenciar!