Variáveis nas CSS

Introdução

A primeira vez que eu ouvi falar de variáveis no CSS eu fiquei tipo "pra que isso? Nós já temos isso no SASS/LESS faz tempo". Mas passado esse primeiro momento de negação, eu aceitei que as variáveis no CSS são muito mais poderosas do que em pré processadores, amém.

Vantagens

Suporte

Aí vem a pergunta mais importante: mas e o suporte? Já posso usar?

Claro que não temos um cenário 100% estável para uso, mas se você pode não ligar muito pro IE11 e versões anteriores, vale a pena. Dar suporte para browser é muito importante, mas tem que tomar cuidado pra gente não deixar passar as coisas novas só porque um browser velho não dá suporte.

Declarando e acessando as variáveis

As variáveis podem ser declaradas em dois contextos global e local.

Quando você declara a variável em escopo global, ela pode ser acessada de qualquer lugar do seu CSS.

CSS

// global
:root{
  --main-color: #FFF;
  --main-font: 'Arial';
}
body{
  color: var(--main-color);
  font-family: var(--main-font);
}

Lembrando que no SASS a declaração seria assim:

SASS

$main-color:#FFF;
$main-font: 'Arial';

Na declaração local, somente os filhos daquele elemento vão poder acessar a variável.

CSS

// local
.classe{
  --main-color: #FFF;
  --main-font: #000;
}
.classe p{
  color: var(--main-color);
  font-family: var(--main-font);
}

E sim, precisa dos dois tracinhos antes da declaração 🙃

A sintaxe para a declaração e uso das variáveis é um pouco chatinha, mas com o tempo a gente se acostuma.

Como usar?

Ok, muito bonito tudo mas e aí, pra que podemos usá-las?

#1 Responsivo

Uma das coisas legais que as variáveis trazem pra gente é que você pode redefinir o valor delas dentro de uma media querie e pronto, seu CSS entende que os valores mudaram.

CSS

:root{
 --main-color: firebrick;
 --main-font-size: 24px;
}
body{
 background: var(--main-color);
 font-size: var(--main-font-size);
}
@media screen and (max-width: 768px) {
 :root{
  --main-color: aquamarine;
  --main-font-size: 16px;
 }
}

Isso acontece porque as variáveis fazem parte do DOM e o quando o valor delas muda, este valor é acessado de novo imediatamente.

Bem legal, né.

Este exemplo está no Codepen

See the Pen responsive with CSS variables by Paula Faria (@paulahfaria) on CodePen.

Se a gente estivesse usando um pré processador, além de mudar o valor das variáveis, eu precisaria reescrever o meu css, assinando novamente os valores.

CSS

$main-color: firebrick;
$main-font-size: 24px;
body{
 background: $main-color;
 font-size: $main-font-size;
}
@media screen and (max-width: 768px) {
 $main-color: aquamarine;
 $main-font-size: 16px;
body{
  background: $main-color;
  font-size: $main-font-size;
 }
}

#2 Manipulando com javascript

Como as variáveis fazem parte do DOM, elas podem ser manipuladas via javascript.

E se você precisasse deixar o usuário trocar o tema do site sem acrescentar várias classes e duplicar CSS?

dois botões um dark theme e outro light theme

De uma maneira muito simples, eu consigo acessar trocar os valores das variáveis usando JS.

Dá uma olhada nesse exemplo que eu criei no Codepen, é bem fácil 🙆

See the Pen updating CSS variables with javascript by Paula Faria (@paulahfaria) on CodePen.

Espero que este post tenha te ajudado a amar muito as variáveis no CSS e que você já tenha planos pra começar usar hoje 🙆

A seguir a documentação caso tenha dúvidas:

Utilizando variáveis CSS

Abraço 💖

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.