Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional

Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS.

Introdução

Fala, impressionador!

Se você trabalha com CSS, provavelmente já ouviu falar de variáveis CSS ou até mesmo já as utiliza nos seus projetos. Mas será que você está aproveitando todo o potencial dessa funcionalidade?

Existe uma técnica avançada que poucos desenvolvedores conhecem e que pode reduzir drasticamente a quantidade de código que você escreve, tornando seus estilos muito mais organizados e fáceis de manter.

Neste artigo, vamos aprender como usar variáveis CSS de forma profissional que vai transformar a maneira como você estrutura seus componentes. Você vai descobrir como escrever menos código, manter tudo mais organizado e escalar seus projetos com facilidade.

Então, vem comigo!

Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Variáveis no CSS (CSS Variables): A forma mais eficiente de escrever CSS

As variáveis no CSS, conhecidas como CSS Variables ou Custom Properties, são uma abordagem poderosa que ajuda a deixar seu código mais organizado, flexível e fácil de manter.

Nesta aula, vou te ensinar como criar variáveis no CSS, aplicá-las ao seu código e explorar os principais benefícios de utilizá-las. Com isso, seus projetos ficarão ainda mais completos e organizados.

No material disponível para download, você encontrará os códigos que usaremos como exemplo nesta aula. Eles incluem os arquivos da Landing Page desenvolvida no nosso curso gratuito de HTML e CSS.

Caso tenha interesse em acompanhar o processo completo de construção dessa landing page, confira o curso acessando a aula: Como Criar uma Landing Page – Curso de HTML e CSS

As variáveis no CSS (CSS Variables ou custom properties) são valores reutilizáveis declarados com --nome e aplicados com var(--nome). Definidas geralmente no seletor :root, centralizam cores, fontes e espaçamentos: você muda em um único lugar e todo o site se atualiza. Deixam o CSS mais organizado, escalável e fácil de manter.

O Que São CSS Variables (Variáveis CSS)?

Variáveis CSS são propriedades personalizadas que podem ser reutilizadas em diferentes partes do seu código CSS. Elas são declaradas no seletor :root, que representa o elemento raiz de um documento, e acessadas com a sintaxe var().

As variáveis são definidas utilizando o prefixo — , seguido de um nome de variável, e seu valor é atribuído com a sintaxe de :, dessa forma:

:root {
  --nome-da-variavel: valor;
}

Essa abordagem torna as variáveis acessíveis globalmente, ou seja, todos os elementos da página podem utilizá-las.

Por exemplo, as cores de um projeto, como no caso da nossa landing page, podem ser organizadas assim:

:root {
  --azul: hsl(202, 100%, 32%);
  --azul-escuro: hsl(202, 100%, 17%);
  --azul-claro: hsl(202, 100%, 50%);
  --azul-claro-75: hsla(202, 100%, 50%, 0.749);

  --preto: #050505;
  --preto-50: rgba(5, 5, 5, 0.5);
  --preto-80: rgba(5, 5, 5, 0.8);
  --cinza-200: #7c7f7f;
  --cinza-400: #333;
  --cinza-500: #2e2e2e;
  --cinza-600: #1c1c1c;
  --cinza-700: #121212;
}

Com as variáveis definidas, é possível utilizá-las em qualquer lugar dentro do arquivo CSS. Por exemplo:

button {
  background-color: var(--azul);
  color: inherit;
  padding: 10px 30px;
  border-radius: 100px;
  border: 3px solid var(--azul-escuro);
  border-right-width: 5px;
  border-bottom-width: 5px;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
}

Em vez de repetir os mesmos valores ao longo do código, você pode usar essas variáveis como um ponto de referência único para garantir consistência no estilo e facilitar a manutenção do projeto.

Alterando uma Variável

A grande vantagem de organizar seu código CSS com variáveis é que, com uma única alteração em uma variável, todas as regras de estilo que a utilizam serão automaticamente atualizadas.

Assim, você não precisa percorrer todo o código alterando cada regra individualmente.

Por exemplo, utilizando as variáveis declaradas anteriormente, podemos alterar facilmente a paleta de cores de todo o nosso site, modificando apenas as variáveis referentes as cores.

:root {
  --azul: hsl(22, 100%, 32%);
  --azul-escuro: hsl(22, 100%, 17%);
  --azul-claro: hsl(22, 100%, 50%);
  --azul-claro-75: hsla(22, 100%, 50%, 0.75);

  --preto: #050505;
  --preto-50: rgba(5, 5, 5, 0.5);
  --preto-80: rgba(5, 5, 5, 0.8);
  --cinza-200: #7c7f7f;
  --cinza-400: #333;
  --cinza-500: #2e2e2e;
  --cinza-600: #1c1c1c;
  --cinza-700: #121212;
}

Perceba como, de maneira prática e rápida, conseguimos alterar as cores de todos os elementos, sem a necessidade de percorrer e modificar cada regra individualmente.

Benefícios das Variáveis CSS

As variáveis CSS (também chamadas de custom properties) oferecem várias vantagens que ajudam a tornar o código mais eficiente, flexível e fácil de manter, como:

• Reutilização de valores: As variáveis permitem definir valores comuns, como cores, espaçamentos ou fontes, em um único lugar e reutilizá-los em diversos pontos do código. Isso reduz a duplicação e torna as mudanças globais mais simples.
• Facilidade de manutenção: Quando valores usados frequentemente mudam, é muito mais fácil alterá-los em um único local (como no seletor :root), sem a necessidade de localizar e substituir manualmente várias instâncias no código.
• Organização e consistência: O uso de variáveis ajuda a manter o design consistente em um projeto, evitando pequenas variações indesejadas em cores ou tamanhos. Você define os estilos dentro das variáveis e replica esses valores por todo o documento.
• Alteração dinâmica de valores: Variáveis CSS podem ser ajustadas dinamicamente com JavaScript ou alteradas em tempo de execução com estados CSS.

As variáveis CSS proporcionam reutilização, manutenção simplificada, flexibilidade e dinamismo no desenvolvimento. Isso torna seu código mais limpo, adaptável e preparado para mudanças.

A Função attr() e Sua Integração com CSS Variables

A função attr() do CSS, redesenhada a partir do Chrome 133 (janeiro de 2025), trouxe uma revolução na forma como escrevemos estilos dinâmicos, complementando perfeitamente o uso de CSS Variables.

Antes limitada à propriedade content em pseudo-elementos, a attr() agora pode ser usada em qualquer propriedade CSS, incluindo propriedades personalizadas, e suporta a conversão de valores de atributos em diferentes tipos de dados, como cores, comprimentos e identificadores personalizados.

O que mudou com a função attr()?

Com a nova atualização, a attr() permite recuperar valores de atributos HTML e aplicá-los diretamente em estilos, com a opção de especificar o tipo de dado esperado usando a função type(). Isso elimina a necessidade de manipulações complexas com JavaScript ou pré-processadores para cenários dinâmicos.

Por exemplo, imagine que você deseja usar o valor de um atributo data-color para definir a cor de um elemento:

<div data-color="red">Texto colorido</div>

div {
  color: attr(data-color type(color), blue);
}

Nesse caso, o atributo data-color é interpretado como um valor de cor (<color>), com blue como fallback caso o atributo esteja ausente ou inválido.

Integração com CSS Variables

A attr() se torna ainda mais poderosa quando combinada com propriedades personalizadas (CSS Variables). Você pode, por exemplo, usar um atributo HTML para definir dinamicamente o valor de uma variável CSS:

<div data-size="50" class="box">Caixa</div>

.box {
  --size: attr(data-size type(length), 100px);
  width: var(--size);
  height: var(--size);
}

Aqui, o atributo data-size define o valor da variável –size como um comprimento (em pixels), que é então usado para estilizar a largura e altura do elemento. Se o atributo data-size não estiver presente, o valor padrão será 100px.

Exemplo prático: Cards dinâmicos

Um caso de uso comum é estilizar elementos com base em atributos dinâmicos, como em uma galeria de cards:

<div class="cards">
  <div class="card" id="card-1"></div>
  <div class="card" id="card-2"></div>
  <div class="card" id="card-3"></div>
</div>

.card {
  view-transition-name: attr(id type(custom-ident), none);
  background-color: var(--card-bg, #f0f0f0);
}

Nesse exemplo, a propriedade view-transition-name usa o valor do atributo id como um <custom-ident>, simplificando a criação de transições visuais dinâmicas sem a necessidade de declarar estilos individuais para cada card.

A variável –card-bg pode ser definida em outro lugar, integrando a flexibilidade da attr() com CSS Variables.

Benefícios da nova attr()

• Flexibilidade: Use atributos HTML em qualquer propriedade CSS, reduzindo a dependência de JavaScript.
• Tipagem de dados: Converta atributos em tipos específicos (como <color>, <length>, <custom-ident>), garantindo maior controle e segurança.
• Manutenção simplificada: Combine attr() com CSS Variables para criar estilos dinâmicos e reutilizáveis, facilitando a manutenção de projetos grandes.
• Suporte experimental: Embora o suporte para propriedades além de content seja experimental, navegadores modernos como o Chrome 133 já implementam essa funcionalidade, com mais suporte esperado em breve.

Dica prática

Para testar a função attr(), verifique a compatibilidade no seu navegador (consulte caniuse.com) e use ferramentas como o Chrome DevTools para inspecionar os valores aplicados. Combine a attr() com CSS Variables em projetos reais para criar layouts mais dinâmicos e contextuais, como formulários ou dashboards interativos.

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Forma Avançada: Variáveis Locais

Aqui entra a técnica que vai revolucionar seu CSS: variáveis locais. A ideia é criar variáveis específicas para cada componente, que funcionam como “intermediárias” entre as variáveis globais e as propriedades CSS.

Para receber o(s) arquivo(s) utilizados nesse exemplo, preencha seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Exemplo Prático – Cards Reutilizáveis

Vamos trabalhar com um exemplo prático: três cards (Design, Dev e Marketing) que compartilham a mesma estrutura, mas com cores de fundo, ícones e textos diferentes.

Caso queira usar o projeto deste artigo, você pode:

1. Baixar o arquivo da aula;
2. Na pasta de Download, clique com o botão direito na pasta baixada e selecione a opção Extrair tudo;

3. Escolha a pasta onde quer extrair os arquivos e clique em Extrair;
4. Abra o editor de código. Neste exemplo usaremos o VS Code;
5. Clique em File e selecione a opção Open Folder, selecione a pasta que você extraiu e clique no botão Abrir;

No arquivo HTML as classes CSS seguem a metodologia BEM (Block Element Modifier), que organiza as classes de forma clara e compreensível, por exemplo: cartao cartao–design. Se você não conhece BEM, não se preocupe, você pode consultar o vídeo Como Organizar Seu Código de Forma Eficiente.

Para abrir o projeto no navegador, você pode usar a extensão Live Server. Para isso:

1. Clique no menu lateral do VS Code no ícone de Extensions (quinto ícone de cima para baixo) ou use o atalho CTRL + SHIFT + X;
2. Busque no campo de pesquisa por Live Server;
3. Clique em Install;

4. Após instalar,  volte para o ícone de Explorer ( atalho CTRL + SHIFT + E), clique com o botão direito do mouse em cima do arquivo HTML e selecione a opção Open with Liver Server.

Pronto, com isso conseguimos acessar o código e ver o resultado no navegador!

Forma Convencional: Variáveis Globais

Como vimos, a maneira mais comum de usar variáveis CSS é declará-las no :root, que representa a raiz do documento CSS. Dessa forma, todos os elementos podem acessar essas variáveis.

:root {
  --cor-azul-300: #A8D5FF;
  --cor-azul-400: #4A90E2;
  --cor-verde-300: #B8E6B8;
  --cor-verde-400: #5CB85C;
  --cor-vermelho-300: #FFB8B8;
  --cor-vermelho-400: #E85C5C;
}

No código acima, assim como o font-weight usa números para definir a espessura da fonte (Exemplo: 300 para light, 400 para regular, 700 para bold), fazemos o mesmo com cores.

O 300 representa tons mais claros e o 400 tons mais intensos.

Como Usar as Variáveis no CSS

Para aplicar essas variáveis, você usa a função var():

.cartao {
  background-color: var(--cor-azul-300);
  padding: 20px;
  border-radius: 8px;
}

O problema dessa abordagem é: para estilizar os três cards com cores diferentes, você precisaria criar seletores específicos para cada um:

.cartao--design {
  background-color: var(--cor-azul-300);
}

.cartao--design .cartao__icone {
  fill: var(--cor-azul-400);
}

.cartao--dev {
  background-color: var(--cor-verde-300);
}

.cartao--dev .cartao__icone {
  fill: var(--cor-verde-400);
}

.cartao--marketing {
  background-color: var(--cor-vermelho-300);
}

.cartao--marketing .cartao__icone {
  fill: var(--cor-vermelho-400);
}

São seis seletores diferentes só para mudar cores! Imagine se você tiver que alterar também sombras, bordas e outros detalhes. O código cresce rapidamente e fica difícil de manter.

Usando as Variáveis Locais

Primeiro, declaramos variáveis locais no seletor do componente usando um underline (_) no início do nome:

.cartao {
  --_cor-fundo: var(--cor-azul-300);
  --_cor-icone: var(--cor-azul-400);
  background-color: var(--_cor-fundo);
  padding: 20px;
  border-radius: 8px;
}

.cartao__icone {
  fill: var(--_cor-icone);
}

O underline não é obrigatório pela especificação CSS, mas é uma convenção usada no mercado para identificar visualmente que essa variável é local, não global.

Agora vem a parte interessante. Para mudar as cores de cada card, você não precisa criar múltiplos seletores. Basta redefinir as variáveis locais:

.cartao--design {
  --_cor-fundo: var(--cor-azul-300);
  --_cor-icone: var(--cor-azul-400);
}

.cartao--dev {
  --_cor-fundo: var(--cor-verde-300);
  --_cor-icone: var(--cor-verde-400);
}

.cartao--marketing {
  --_cor-fundo: var(--cor-vermelho-300);
  --_cor-icone: var(--cor-vermelho-400);
}

Pronto! Ao invés de seis seletores, temos apenas três. E o melhor: está muito mais claro o que cada um faz.

Por que as variáveis locais são melhores?

• Menos código e mais clareza;
• As variáveis locais são herdadas por todos os elementos filhos. Quando você define –_cor-icone no .cartao, o .cartao__icone automaticamente tem acesso a essa variável. Você não precisa criar seletores aninhados;
• Imagine que você precise adicionar mais personalizações: cor da borda, cor da sombra, cor do título. Com a abordagem convencional, você criaria 3 seletores novos para cada card (9 no total). Com variáveis locais, você apenas adiciona mais linhas nos seletores que já existem;
• Quando você precisa fazer alterações, sabe exatamente onde ir. Não precisa procurar por múltiplos seletores espalhados pelo arquivo CSS.

Perguntas frequentes sobre variáveis no CSS

Conclusão – Variáveis no CSS (CSS Variables): A forma mais eficiente de escrever CSS

As variáveis CSS oferecem uma solução poderosa para projetos modernos. Elas simplificam o gerenciamento de estilos, otimizam a consistência visual e reduzem o retrabalho.

Na aula de hoje, mostrei como as CSS Variables funcionam e como você pode aplicá-las em seus projetos para trazer mais flexibilidade e eficiência.

Seja em pequenos projetos ou aplicações robustas, adotar variáveis torna o CSS mais organizado e escalável.

Para dominar esse e outros conceitos importantes e levar seus projetos de desenvolvimento web para outro nível, confira o nosso Curso Completo HTML e CSS Impressionador.

Caso prefira esse conteúdo no formato de vídeo-aula, assista aos vídeos abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: Num projeto de página já pronto, a aula troca as cores fixas do CSS por variáveis declaradas no :root e usadas com var(). Depois, nas ferramentas do navegador (F12), converte as cores para HSL e, mudando só quatro números de matiz, altera quase toda a página. Imagens e ícones ficam de fora da troca.

Neste vídeo (24 min):

• 3:13 - Declara a primeira variável, a do cinza escuro, dentro do :root, com dois hífens antes do nome.
• 4:18 - Troca o código fixo da cor por var() com o nome da variável e confere com Ctrl + F que o valor antigo não sobrou no arquivo.
• 5:02 - Faz o mesmo com os azuis (azul, azul escuro e azul claro), copiando a linha para baixo com Shift + Alt + seta para baixo.
• 6:55 - Cria a variável do preto com um tom quase preto, porque às vezes o preto puro fica forte demais; para o branco, sugere #F1F1F1 no lugar de #fff, mais suave.
• 9:36 - Para o azul claro com transparência, mostra a sintaxe de cor relativa, com from, que parte da cor de outra variável; no Can I use, ela aparecia com 86% de suporte nos navegadores.
• 10:12 - Sem o from, cria uma variável separada para o azul claro transparente e a escreve em rgba, porque a transparência em hexadecimal é ruim de ler.
• 16:45 - Ao conferir a página, um trecho perde contraste, e nem o cinza nem o cinza intermediário resolvem: o tom certo fica entre dois deles.
• 19:07 - Renomeia os cinzas com números, no padrão do font-weight, e o tom que faltava entra como cinza 600, entre o 500 e o 700, e o trecho volta ao normal.
• 19:36 - Nas ferramentas do navegador, converte as cores das variáveis para HSL e mexe só na matiz, mantendo a saturação e a luminosidade.
• 21:41 - Com a matiz em 22, fundo e texto passam para um laranja amarronzado; a imagem de fundo, que veio do time de design, e os ícones não mudam.

Trechos do vídeo:

• A vantagem das variáveis no CSS é mudar em um lugar só: quando uma cor muda, você altera o valor da variável e todos os lugares que a usam mudam juntos, em vez de trocar um por um.
• O :root é a raiz do documento, o próprio HTML: a variável declarada ali é global e vale para qualquer elemento da página.
• Variável no CSS não serve só para cor: tamanho de fonte e espaçamento também podem ser padronizados do mesmo jeito.
• Para nomear tons de uma cor, dá para usar a escala do font-weight: 400 para o padrão, 700 para o escuro, 200 para o claro e 500 para um intermediário puxado para o escuro. Com números, fica mais fácil manter uma escala sem ficar mexendo no nome de um tom para outro.
• Antes de usar um recurso novo do CSS em produção, confira no Can I use quantos navegadores já o aceitam: a régua do instrutor é passar de 93% ou 94%; abaixo de 90%, ele recomenda só testar em desenvolvimento.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Posts mais recentes de HTML e CSS

• 
  LESS CSS: Guia Completo do Pré-processador (2026)8 de maio de 2026
  LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático.
• 
  Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional29 de dezembro de 2025
  Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS.
• 
  Display CSS: Nova Sintaxe e Como Usar26 de novembro de 2025
  Aprenda a usar a propriedade display CSS com a nova sintaxe de múltiplos valores. Veja exemplos práticos e descubra como combinar estilos em um único comando.

Posts mais recentes da Hashtag Treinamentos

• 
  Planilha de Controle de Notas Fiscais no Excel [Grátis]2 de outubro de 2026
  Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço.
• 
  Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?2 de outubro de 2026
  Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe.
• 
  Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA30 de setembro de 2026
  Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.