Banner propaganda da DevMedia - Cursos de desenvolvimento web

Variáveis nas CSS

visualizações Publicado em: 28/08/2018 Quero ser um autor
foto do autor
Autora: Paula Faria

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?

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

Variáveis CSS são entidades definidas por autores ou usuários de páginas web que contêm valores específicos em um…

developer.mozilla.org
Abraço 💖

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo