English 中文 العربية 日本語 Português

CSS: Variáveis CSS

Última atualização: 2026-10-13

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.

1. Definindo Variáveis

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

▶ Exemplo

▶ Experimente

2. Usando Variáveis

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

▶ Exemplo

▶ Experimente

3. Escopo de Variáveis

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

Variáveis globais — definidas em :root:

▶ Exemplo

▶ Experimente

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

▶ Exemplo

▶ Experimente

4. Herança de Variáveis

Variáveis CSS herdam como propriedades CSS normais:

▶ Exemplo

▶ Experimente

5. Valores de Reserva para var()

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

▶ Exemplo

▶ Experimente

6. Modificando Variáveis com JavaScript

✅ Implementação de troca de tema: Variáveis CSS combinadas com JavaScript são a melhor solução para implementar "modo escuro" — alterne o atributo data-theme no <html>, use variáveis no CSS para referenciar diferentes cores, e uma linha de código JS pode mudar o esquema de cores do site inteiro.

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

▶ Exemplo

▶ Experimente

7. Implementando Troca de Tema

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

▶ Exemplo

▶ Experimente

Depois troque temas via JavaScript:

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

8. 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

9. Diferenças dos Pré-processadores

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

Recurso Variáveis CSS Variáveis Sass
Modificação em tempo de execução ✅ Sim ❌ Fixo após compilação
Escopo ✅ Herança CSS ❌ Valores fixos após compilação
Navegador Suporte a navegadores modernos Sem suporte de navegador necessário (pré-compilado)
Interação JS ✅ Legível/gravável ❌ Não acessível

❓ Perguntas Frequentes

P Qual é a diferença entre variáveis CSS e variáveis Sass?
R Variáveis CSS são verdadeiras propriedades CSS que podem ser modificadas dinamicamente no navegador e suportam leitura/escrita JavaScript. Variáveis Sass tornam-se valores fixos após compilação e não podem ser modificadas em tempo de execução. Variáveis CSS podem fazer troca de tema; variáveis Sass não. Elas não conflitam e podem ser usadas juntas.
P Quais são as regras de escopo para variáveis CSS?
R Variáveis CSS seguem regras de cascata. Variáveis definidas em :root são globalmente disponíveis; variáveis definidas em um elemento só são efetivas naquele elemento e seus filhos. Esta propriedade permite sobrescritas locais de tema — dê a um contêiner valores de variáveis diferentes, e todas as referências àquelas variáveis dentro mudam automaticamente.
P Variáveis CSS podem implementar modo escuro?
R Sim, este é o caso de uso mais clássico para variáveis CSS. Defina variáveis de cores claras em :root, sobrescreva-as com valores escuros em [data-theme="dark"], depois uma linha de JavaScript document.documentElement.dataset.theme = "dark" pode mudar o esquema de cores do site inteiro.

📖 Resumo

📝 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.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%