Variáveis CSS

Variáveis CSS (Propriedades Personalizadas) permitem definir valores reutilizáveis no CSS, semelhantes a variáveis em linguagens de programação. Usar variáveis CSS pode reduzir muito o código repetitivo e facilitar o gerenciamento de tokens de design como cores de tema e espaçamento.

Definindo Variáveis

Variáveis CSS usam nomes de propriedades personalizados (começando com --) para declarar:

Exemplo

<style>
/* Definir variáveis globais em :root */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --border-radius: 8px;
  --spacing: 16px;
  --font-size: 16px;
}
</style>

Usando Variáveis

Referencie variáveis usando a função var():

Exemplo

<style>
.button {
  background-color: var(--primary-color);
  color: white;
  border-radius: var(--border-radius);
  padding: var(--spacing);
  font-size: var(--font-size);
}

.card {
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
  padding: var(--spacing);
}
</style>
<button class="button">Botão</button>
<div class="card">Card</div>

Escopo de Variáveis

O escopo de variáveis CSS é determinado por onde são definidas:

Variáveis globais — definidas em :root:

Exemplo

<style>
:root {
  --color: blue;
}
</style>
<div class="box-demo">Caixa de demostração mostrando efeito da propriedade atual</div>

Variáveis locais — definidas em um seletor específico, efetivas apenas naquele seletor e seus filhos:

Exemplo

<style>
.card {
  --card-bg: #f5f5f5;
  --card-padding: 20px;
}

.card-header {
  background: var(--card-bg);
  padding: var(--card-padding);
}
</style>
<div class="card">Card</div>
<div class="card-header">Cabeçalho do card</div>

Herança de Variáveis

Variáveis CSS herdam como propriedades CSS normais:

Exemplo

<style>
:root {
  --theme-color: #333;
}

/* Sobrescrever variável em um contêiner */
.dark-theme {
  --theme-color: #eee;
}

.dark-theme .content {
  color: var(--theme-color);  /* #eee */
}

.content {
  color: var(--theme-color);  /* #333 */
}
</style>
<div class="dark-theme">Visualização do tema escuro</div>
<div class="content">Área principal de conteúdo</div>

Valores de Reserva para var()

var() pode definir um segundo parâmetro como reserva — usado quando a variável é indefinida:

Exemplo

<style>
.element {
  color: var(--undefined-color, red);  /* Usa vermelho porque --undefined-color é indefinido */
  background: var(--bg, var(--fallback, #eee));  /* Pode aninhar reservas */
}
</style>
<div class="element">Este é um elemento de exemplo</div>

Modificando Variáveis com JavaScript

Uma grande vantagem das variáveis CSS é que podem ser modificadas dinamicamente via JavaScript:

Exemplo

// Obter
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

// Definir
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Implementando Troca de Tema

Variáveis CSS são a melhor maneira de implementar troca de tema como "modo escuro":

Exemplo

<style>
/* Tema claro (padrão) */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f5f5f5;
  --border-color: #dddddd;
}

/* Tema escuro */
[data-theme="dark"] {
  --bg-color: #1a1a2e;
  --text-color: #eeeeee;
  --card-bg: #16213e;
  --border-color: #0f3460;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
</style>

Depois troque temas via JavaScript:

document.documentElement.setAttribute('data-theme', 'dark');
// ou
document.documentElement.setAttribute('data-theme', 'light');

Vantagens das Variáveis CSS

1. Reduz código repetitivo: Uma variável usada em muitos lugares, mude uma vez para atualizar todas
2. Modificável em tempo de tempo: Pode ser alterada dinamicamente via JS para troca de tema
3. Controle de escopo: Pode sobrescrever valores de variáveis em contêineres específicos
4. Semântico: --primary-color é mais fácil de entender que #3498db

Diferenças dos Pré-processadores

Variáveis CSS (Propriedades Personalizadas) diferem das variáveis Sass/Less:

❓ Perguntas Frequentes

📖 Resumo

• Variáveis CSS são ferramentas muito importantes no desenvolvimento CSS moderno
• Definidas com --nome-variável, usadas com var(), tornam o código de estilo mais limpo e fácil de manter
• O maior valor: mude um valor, e todos os lugares referenciando aquela variável atualizam automaticamente
• Troca de tema, esquemas de cores responsivos, linguagem de design unificada — variáveis CSS são especialmente úteis em projetos grandes

📝 Exercícios

1. Crie uma página usando variáveis CSS para definir pelo menos 5 variáveis para cores de tema, cores de texto, espaçamento, etc., e use-as por toda a página.
2. Baseado na página acima, implemente "troca de cor de tema com um clique" — modifique a variável de cor primária em :root e observe mudanças em todos os elementos relacionados.
3. Use variáveis CSS para implementar uma troca simples de modo "dia/noite" (trocando classe ou atributo data-theme via JS).
4. Sobrescreva localmente valores de variáveis CSS em um contêiner (como um componente de card) e observe mudanças de estilo em seus elementos filhos.