Variáveis CSS são uma novidade no mundo das folhas de estilo que nem todos estão sabendo usar. Neste artigo, veja um guia prático sobre variáveis CSS que mostra suas principais vantagens, exemplos, macetes, formas de uso e interações com outras tecnologias.
Pré-processadores de CSS como Sass e LESS certamente ajudam a manter sua base de código CSS organizada e passível de manutenção. Recursos como variáveis, mixins, loops etc. — que adicionam recursos dinâmicos à codificação CSS — contribuem para minimizar a repetição e acelerar o tempo de desenvolvimento.
Nos últimos anos, alguns recursos dinâmicos começaram a aparecer como parte do próprio CSS. Variáveis CSS — ou “propriedades personalizadas”, como são chamadas oficialmente — já são uma realidade e têm um ótimo suporte dos principais navegadores.
Neste artigo, você descobrirá como é possível começar a integrar variáveis CSS em seu fluxo de trabalho de desenvolvimento com CSS para tornar suas folhas de estilo mais fáceis de manter e DRY (Don’t Repeat Yourself — não repita a si mesmo).
O que são variáveis CSS?
Se você já usou alguma linguagem de programação, já conhece o conceito de uma variável. As variáveis permitem armazenar e atualizar os valores que seu programa precisa para funcionar.
Por exemplo, considere o seguinte snippet de JavaScript:
|
1 2 3 4 5 6 7 |
let number1 = 2; let number2 = 3; let total = number1 + number2; console.log(total); // 5 number1 = 4; total = number1 + number2; console.log(total); // 7 |
number1 e number2 são duas variáveis que armazenam os números 2 e 3, respectivamente.
total é também uma variável que armazena a soma das variáveis number1 e number2, nesse caso resultando no valor 5. Você pode alterar dinamicamente o valor dessas variáveis e usar o valor atualizado em qualquer lugar do programa. No snippet acima, o valor de number1 é atualizado para 4 e, quando se executa a adição novamente usando as mesmas variáveis, o resultado armazenado dentro total agora é 7.
A beleza das variáveis é que elas permitem armazenar um valor em um único lugar e o torna passível de uma atualização rápida para várias finalidades. Não é necessário adicionar novas entidades com valores diferentes em todo o programa: todas as atualizações de valor acontecem usando o mesmo local de armazenamento, ou seja, a variável.
CSS é principalmente uma linguagem declarativa, carente de capacidades dinâmicas. Alguns poderiam alegar que ter variáveis no CSS seria quase uma contradição em termos. Se o desenvolvimento front end fosse apenas sobre semântica, seria. Felizmente, as linguagens da Web são muito parecidas com linguagens vivas, que evoluem e se adaptam de acordo com o ambiente circundante e as necessidades de seus praticantes. CSS não é exceção.
Resumindo, as variáveis agora se tornaram uma realidade empolgante no mundo do CSS, e, como você verá em breve, essa incrível nova tecnologia é bastante simples de aprender e usar.
Há benefícios em usar variáveis CSS?
Os benefícios de usar variáveis em CSS não são muito diferentes daqueles de variáveis em linguagens de programação.
Veja o que a especificação tem a dizer sobre isso:
Usar variáveis CSS facilita a leitura de arquivos grandes, já que valores aparentemente arbitrários agora têm nomes informativos e tornam a edição desses arquivos muito mais fácil e menos propensa a erros, já que só é necessário alterar o valor uma vez, na propriedade customizada e a mudança será propagada para todos os usos dessa variável automaticamente.
Em outras palavras, ao nomear variáveis de maneiras que façam sentido em relação ao projeto, isso torna mais fácil gerenciar e manter o código. Por exemplo, editar a cor primária em um projeto será muito mais fácil quando o que é preciso mudar é um valor para --primary-color em vez de alterar esse valor dentro de várias propriedades CSS, em vários locais diferentes.
Qual é a diferença entre variáveis CSS e variáveis de pré-processadores?
Uma maneira pela qual é possível aproveitar a flexibilidade de variáveis ao estilizar sites é usando pré-processadores CSS, como Sass e LESS. Os pré-processadores permitem definir variáveis e usá-las em funções, loops, operações matemáticas etc.
Mas isso significa que variáveis CSS são irrelevantes? Não é bem assim, principalmente porque as variáveis CSS são algo diferente das variáveis do pré-processador.
As diferenças surgem do fato de que as variáveis CSS são propriedades CSS ativas em execução no navegador, enquanto as variáveis do pré-processador são compiladas no código CSS regular, portanto, o navegador não sabe nada sobre elas.
O que isto significa é que é possível atualizar variáveis CSS em uma folha de estilos dentro de atributos de estilo embutidos e atributos de apresentação SVG ou optar por manipulá-los rapidamente usando JavaScript. Não é possível fazer nada disso com variáveis de pré-processadores. Isso abre um mundo inteiro de possibilidades!
Isso não quer dizer que você precisa escolher entre um ou outro: nada o impedirá de aproveitar os super poderes do CSS e das variáveis do pré-processador trabalhando juntos.
Variáveis CSS: a sintaxe
Embora neste artigo se use o termo variáveis CSS para simplificar, a especificação oficial refere-se a elas como propriedades personalizadas de CSS para variáveis em cascata. A parte da propriedade personalizada CSS é semelhante a esta:
|
1 |
--my-cool-background: #73a4f4; |
Prefixa-se a propriedade personalizada com 2 traços e atribui-se um valor a ela como se faria com uma propriedade CSS comum. No snippet acima, foi atribuído um valor de cor à propriedade customizada --my-cool-background .
A parte variável em cascata consiste em aplicar sua propriedade customizada usando a função var() , que se parece com isso:
|
1 |
var(--my-cool-background) |
A propriedade customizada tem escopo dentro de um seletor de CSS e var() é usada como valor de uma propriedade CSS real:
|
1 2 3 4 5 6 7 8 |
:root { --my-cool-background: #73a4f4; } /* O restante do arquivo CSS */ #foo { background-color: var(--my-cool-background); } |
O trecho acima “escopa” a propriedade customizada --my-cool-background para a pseudo-classe :root , o que torna seu valor disponível globalmente (ele combina tudo dentro do elemento <html>). Então, usa a função var() para aplicar o valor ao background-color do container #foo, que, como conseqüência, agora terá um fundo azul claro.
Isso não é tudo. É possível usar o mesmo valor de cor azul claro para estilizar outras propriedades de cor de vários elementos HTML. Por exemplo, color, border-color etc., simplesmente recuperando o valor da propriedade personalizada usando var(--my-cool-background) e aplicando-o à propriedade CSS apropriada (é claro, pensando na sua convenção de nomenclatura para variáveis CSS antes que as coisas fiquem confusas):
|
1 2 3 |
p { color: var(--my-cool-background); } |
Também é possível definir o valor de uma variável CSS com outra variável CSS. Por exemplo:
|
1 2 3 |
--top-color: orange; --bottom-color: yellow; --my-gradient: linear-gradient(var(--top-color), var(--bottom-color)); |
O fragmento acima cria a variável --my-gradient e a define com o valor das variáveis --top-color e --bottom-color criar um gradiente. Agora, é possível modificar o gradiente a qualquer momento, em qualquer lugar em que tenha sido usado, apenas alterando os valores de suas variáveis.
Aqui está uma demonstração no CodePen:
Finalmente, é possível incluir um ou mais valores de fallback para variáveis CSS. Por exemplo:
|
1 |
var(--main-color, #333); |
No snippet acima, #333 é um valor de fallback. Se os fallbacks não forem incluídos, no caso de propriedades customizadas inválidas ou não definidas, o valor herdado será aplicado.
Variáveis CSS são sensíveis a maiúsculas e minúsculas
Ao contrário das propriedades CSS regulares, variáveis CSS diferenciam maiúsculas de minúsculas.
Por exemplo, var(--foo) e var(--FOO) referem-se a duas propriedades customizadas diferentes, --foo e --FOO, respectivamente.
Variáveis CSS estão sujeitas à cascata
Como as propriedades CSS regulares, variáveis CSS são herdadas. Por exemplo, em uma definição de propriedade personalizada com o valor azul:
|
1 2 3 |
:root { --main-color: blue; } |
Todos os elementos dentro da raiz <html> nos quais se aplica aplicar a variável --main-color herdarão o valor blue.
Se se reatribuir um valor diferente à propriedade personalizada dentro de outro elemento, todos os filhos desse elemento herdarão o novo valor. Por exemplo:
|
1 2 3 4 5 6 7 8 9 10 11 |
:root { --main-color: blue; } .alert { --main-color: red; } p { color: var(--main-color); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <!-- código da <head> --> </head> <body> <div> <p>Parágrafo azul.</p> <div class="alert"> <p>Parágrafo vermelho.</p> </div> </div> </body> </html> |
O primeiro parágrafo na marcação acima herda seu valor da variável global --main-color, o que o torna azul.
O parágrafo dentro do elemento div com a classe .alert será vermelho porque seu valor de cor é herdado do escopo local --main-color , que tem o valor de vermelho.
Usando variáveis CSS com SVGs
Variáveis CSS e SVGs funcionam muito bem juntos! É possível usar variáveis CSS para modificar atributos de estilo e de apresentação dentro de SVGs inline.
Digamos que seja preciso ter uma cor diferente para ícones SVG de acordo com o container-pai dentro do qual eles são colocados. Você pode dimensionar as variáveis localmente dentro de cada container-pai, defini-las para a cor desejada e o ícone dentro de cada container herdará a cor apropriada de seu pai.
Aqui estão os trechos relevantes:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* symbol inline do SVG para o ícone */ <svg> <symbol id="close-icon" viewbox="0 0 200 200"> <circle cx="96" cy="96" r="88" fill="none" stroke="var(--icon-color)" stroke-width="15" /> <text x="100" y="160" fill="var(--icon-color)" text-anchor="middle" style="font-size:250px;">x</text> </symbol> </svg> /* primeira instância do ícone */ <svg> <use xlink:href="#close-icon" /> </svg> |
A marcação acima usa a tag <symbol>, que permite criar uma versão invisível do gráfico SVG. O código, então, instancia uma cópia visível do mesmo gráfico com a tag <use>. Este método permite criar qualquer número de ícones e personalizá-los individualmente ao gosto, simplesmente referenciando os elementos de <symbol> pelo ID (#close-icon). Isso é mais conveniente do que repetir o mesmo código para recriar a imagem.
Observe o valor da propriedade stroke dentro do elemento círculo e do fill dentro do elemento de texto do símbolo SVG: ambos aplicam uma variável CSS, ou seja, --icon-color, que é definido no seletor :root dentro do documento CSS, assim:
|
1 2 3 |
:root { --icon-color: black; } |
É assim que o ícone fica neste ponto:
Se agora se colocar um ícone SVG em diferentes elementos de container e localizar sua variável dentro do seletor de cada elemento-pai com um valor de cor diferente, terá ícones de cores diferentes sem precisar adicionar mais regras de estilo!
Para mostrar isso, vamos colocar uma instância do mesmo ícone dentro do div com uma classe .success.
O HTML:
|
1 2 3 4 5 |
<div class="success"> <svg> <use xlink:href="#close-icon" /> </svg> </div> |
Agora, localizar a variável --icon-color , atribuindo o valor “verde” para dentro do seletor .success e verificar o resultado.
O CSS:
|
1 2 3 |
.success { --icon-color: green; } |
A cor do ícone agora é verde:
Veja a demonstração completa abaixo:
Usando variáveis CSS com animação @keyframes
As variáveis CSS podem trabalhar com animações CSS, tanto em elementos HTML regulares, quanto em SVGs inline. Lembre-se de definir as propriedades personalizadas dentro do seletor que segmenta o elemento que deseja animar e referenciá-las com o var() dentro do bloco @keyframes.
Por exemplo, para animar ellipse com a classe de .bubble dentro de um gráfico SVG, o CSS poderia ser assim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.bubble { --direction-y: 30px; --transparency: 0; animation: bubbling 3s forwards infinite; } @keyframes bubbling { 0% { transform: translatey(var(--direction-y)); opacity: var(--transparency); } 40% { opacity: calc(var(--transparency) + 0.2); } 70% { opacity: calc(var(--transparency) + 0.1); } 100% { opacity: var(--transparency); } } |
Observe como é possível realizar cálculos com a função var() usando CSS calc(), que adiciona ainda mais flexibilidade ao seu código.
O interessante sobre o uso de variáveis CSS nesse caso é que é possível ajustar as animações simplesmente modificando os valores das variáveis dentro dos seletores apropriados. Não há necessidade de procurar por cada uma das propriedades dentro do @keyframes!
Aqui está a demonstração completa:
Manipulando variáveis CSS com JavaScript
Mais uma coisa legal possível, é acessar variáveis CSS diretamente do código JavaScript.
Digamos que se tenha uma variável CSS chamada --left-pos, com um valor de 100px, com escopo para a classe .sidebar:
|
1 2 3 |
.sidebar { --left-pos: 100px; } |
Obtendo o valor de --left-pos do JavaScript, ficaria assim:
|
1 2 3 4 5 6 7 8 9 10 11 |
// cacheia o elemento-alvo const sidebarElement = document.querySelector('.sidebar'); // cacheia os estilos de "sidebarElement" const cssStyles = getComputedStyle(sidebarElement); // retorna o valor da variável --left-pos CSS const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim(); // log para cssVal para mostrar o valor no console (100px) console.log(cssVal); |
Para definir uma variável CSS com JavaScript, é possível fazer algo assim:
|
1 |
sidebarElement.style.setProperty('--left-pos', '200px'); |
O snippet acima define o valor de --left-pos para o elemento da barra lateral para 200px.
Adicionar interatividade a uma página da web usando variáveis CSS é muito mais simples e fácil de manter do que alternar um monte de classes ou reescrever regras CSS inteiras rapidamente.
Dê uma olhada na demonstração da CodePen abaixo, onde você pode, interativamente, alternar uma barra lateral e alterar a propriedade blend mode e a cor do background usando apenas variáveis CSS e JavaScript:
Suporte do snavegadores para variáveis CSS
Exceto pelo IE11, todos os principais navegadores possuem suporte para variáveis CSS.
Uma forma de o código atender a navegadores não compatíveis é usar o bloco @supports com uma feature query falsa:
|
1 2 3 4 5 6 7 8 9 10 |
section { color: gray; } @supports(--css: variables) { section { --my-color: blue; color: var(--my-color, 'blue'); } } |
Dado que @supports funciona no IE/Edge, isso fará o truque. Se também se aproveitar os valores de fallback dentro de var() , o código será ainda mais infalível! ;-)
Como resultado, no Chrome e em outros navegadores com suporte, o texto dentro do <section>será azul:
IE11, que não tem suporte para variáveis CSS, renderiza a página com texto cinza:
Demonstração:
Uma desvantagem dessa abordagem é que, se você usar variáveis CSS e navegadores não compatíveis são prioridade em seu projeto atual, o código pode ficar um pouco complicado de ser mantido.
Nesse caso, você pode optar por usar PostCSS com cssnext, que permite escrever código CSS de ponta e torná-lo compatível com navegadores que não suportam (um pouco como os transpiladores fazem para JavaScript).
Recursos sobre variáveis CSS
Para saber mais sobre as vantagens e desvantagens das variáveis CSS, incluindo soluções alternativas de suporte ao navegador e casos de uso interessantes, confira os recursos abaixo:
- CSS Custom Properties for Cascading Variables Module Level 1 — W3C Spec
- Using CSS variables — MDN
- Lea Verou’s Talk on CSS Variables for CSSConf Asia 2016 (video)
- What is the difference between CSS variables and preprocessor variables? — Chris Coyier (CSS-Tricks)
- It’s Time To Start Using CSS Custom Properties — Serg Hospodarets (Smashing Magazine)
- Locally Scoped CSS Variables: What, How, and Why — Una Kravets
- Pragmatic, Practical, and Progressive Theming with Custom Properties — Harry Roberts (CSS Wizardry)
- Customizable SVG Icons with CSS Variables — Amelia Bellamy-Royds (CodePen).
Demos divertidas
- Animation with CSS Variables — Wes Bos
- Update CSS Variables with JS — Wes Bos
- Simple responsive grid with CSS variables — Chris Coyier
- Slack Theming with CSS Custom Properties — Stephanie
- Ana Tudor’s CSS variables demos on CodePen.
Conclusão sobre variáveis CSS
Este guia prático sobre variáveis CSS serviu para mostrar as principais considerações a respeito do advento do uso de variáveis em folhas de estilos, suas principais vantagens, exemplos, macetes, formas de uso e interações com outras tecnologias.
A partir de agora, é usar esse material para referência e partir para a prática!
E aí, tá esperando o quê? Já experimentou usar variáveis CSS para deixar seu código mais modernos e mais manutenível? Coloque nos comentários como tem sido sua experiência com variáveis CSS.