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

• fazem parte do DOM, logo podem ser acessadas e manipuladas via javascript (essa pra mim é a maior vantagem)
• não precisa de pré processador para usar
• os valores podem ser redefinidos de acordo com a necessidade

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?

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

Compartilhe essa matéria com seus amigos