Variáveis no CSS

Variáveis no CSS

Sim, meus amigos, os browsers estão começando a ter suporte a variáveis no CSS! O Firefox já oferece o suporte nativamente, enquanto chrome tem suporte em sua versão canary. Confira a tabela no caniuse e mantenha-se atualizado.

:root

Antes de abordarmos as variáveis propriamente ditas, vejamos o :root. Trata-se de uma pseudo-class que representa o topo da árvore do documento, ou seja, o html. A diferença aqui é que o seletor html tem um pouco menos de especificidade que o seletor :root. Além disto, :root também representará o topo da árvore em documentos xml, svg, etc.

Sintaxe

Para que uma variável funcione e seja acessível em todos os níveis de seu css, utilizamos o :root.

A sintaxe é muito simples, basicamente acrescente um par de - a algum nome válido de variável, :, e então o valor desta variável, assim:

:root {   --bg-color: rgba(0, 0, 0, .7); } 

Para acessarmos o valor de uma variável, precisamos evoca-la utilizando var().

.some-element {   background: var(--bg-color); } 

Escopo

Como citei antes, utilizamos o :root para termos uma variável totalmente acessível, mas as variáveis no css suportam escopo.

Desta forma:

.parent-el { --size: 4rem; min-height: var(--size); } .parent-el .some-child-el { width: var(--size); /* funciona normalmente */ } .some-other-el { width: var(--size); /* não funcionará */ }  Muito legal, não? Podemos inclusive fazer nested variables. .grand-parent-el { --size: 4rem; } .grand-parent-el .parent-el { --color: red; } .grand-parent-el .parent-el .some-child-el { width: var(--size); color: var(--color); }  Outra coisa interessante é que podemos utilizar pseudo-elements da mesma maneira, hierarquicamente. .parent-el:after {   width: var(--size); }  Porém, caso queira adicionar uma variável ao content do pseudo-element, ele precisa ser do tipo string. :root {   --text: "something";   --size: 30px; } .some-element:before {   /* funciona */   content: var(--text); } .some-element:after {   /* não funciona pois não é uma string */   content: var(--size); }  calc + variables Podemos avançar mais e fazer alguns experimentos um pouco mais complexos, utilizando o calc. O calc permite que um valor seja calculado "sob demanda", diretamente pelo css. Por exemplo: .some-selector {   width: calc(100% - 50px); }  Agora, vislumbre a possibilidade de combinar o calc com o var! E em breve, eu espero que possamos também combinar o attr. .some-selector {   width: calc(100% - var(--size)); }  Uma observação importante aqui, é na forma como o calc é executado. Ao interpretar o CSS, a engine irá inicialmente armazenar a syntax, e expandi-la para coletar seu valor, apenas quando ela for usada. Desta forma: :root {   --size: 150px; } .some-selector {   --current-size: calc(100% - var(--size)); } .some-other-selector {   /* não funcionará */   --new-size: calc(var(--current-size) / 2); }  O que ocorre, é que calc(100% - var(--size)) será expandido para calc(100% - 150px), e então, para o valor resultante do cálculo. Até aí, tudo bem. Mas então, no momento em que a linha calc(var(--current-size) / 2) é tratada, ela é expandida para calc(calc(100% - var(--size)) / 2)! O problema é que não há suporte a nested calls de calc. Ainda existem discussões no grupo do CSS na W3C, conversando sobre se calc deveria suportar chamadas aninhadas ou não. Concluindo O que achou das variáveis no css? Deixe seu comentário e vamos falar do assunto! Veja também algumas referências:  MDN var() caniuse