Como usar variáveis no CSS de forma nativa

Verifique no Can I Use

Olá pessoal, neste artigo irei abordar o básico sobre variáveis nativas com CSS, e como você pode usar essa tecnologia hoje e sem medo de ser feliz.

CSS Custom Properties for Cascading Variables Module Level 1

Esta especificação ainda em fase de Last Call Working Draft, traz um novo módulo de CSS3 que permite a criação de varáveis de forma nativa, de uma forma simples e rápida como veremos a seguir.

Como declarar uma variável?

Para declarar uma variável utilizamos as chamadas Custom Properties, uma nova forma de declarar uma propriedade utilizando a seguinte sintaxe:

.exemplo {
    --destaque: #660066;
}

Por definição uma Custom Property é qualquer propriedade que inicie com dois hífens, como ‘—foo’.

Como utilizar uma variável?

Para utilizar uma variável utilizamos a função var(), passando a variável criada como parâmetro, assim ela irá retornar o valor da variável, veja o exemplo a seguir:

.exemplo {
    --destaque: #660066;
    background-color: var(--destaque);
}

O que equivale diretamente a:

.exemplo {
    background-color: #660066;
}

A notícia ruim

As variáveis tem um escopo a ser seguido, logo uma variável não pode ser usada fora de seu escopo.

Exemplos de utilização correta do escopo:

.menu {
    --tamanho: 20px;
}
.menu ul li {
    padding: var(--tamanho); // retorna 20px
}

Exemplo de utilização incorreta do escopo:

.menu {
    --tamanho: 20px;
}
.footer {
    padding: var(--tamanho); // não retorna nada
}

A notícia boa

Podemos declarar variáveis em um tipo de “escopo global”, que nada mais é do que a raiz do documento, para isso utilizamos o seletor :root.

Exemplo de variáveis declaradas na raiz do documento.

:root {
    --tamanho: 50%;
    --cor: #660066;
}

.exemplo-1 {
    margin: var(--tamanho); // retorna 50%
}

.exemplo-2 {
    color: var(--cor); // retorna #660066
}

Até aqui legal, mas e o suporte?

Nem tudo são flores amigos, até o momento o suporte é apenas para Firefox. Vejam a tabela completa no Can i use.

Como usar hoje!

Não teria graça se eu trouxesse aqui uma coisa tão divertida e ninguém pudesse usar, e com um suporte tão ruim, só nos resta apelar para o maravilhoso postcss-css-variables, que é um plugin para Post CSS.

Mas o que é mesmo esse Post CSS?

Esse cara é um pós-processador de CSS que possuí vários plugins, sendo o mais famoso o Autoprefixer, quer por sua vez pega seu código e aplica os vendors prefixes conforme a necessidade, e é exatamente isso que o postcss-css-variables faz, ele pega suas variáveis e as poem em seu devido lugar, compilando seu “CSS do futuro”, para um CSS nativo e suportado por todos.

Você pode ver exatamente como o plugin funciona no postcss-css-variables Playground.

Quais as vantagens de utilizar o postcss-css-variables?

1 – Você vai escrever o CSS de forma nativa, e usar o pós-processador como um tipo de “polyfill”, que no futuro, caso outros navegares além do firefox adotem a especificação, pode ser retirado e seu código já estará pronto, mais ou menos como ocorre com o JavaScript e o Babel.

2 – Usar uma coisa nova em seu workflow. Isso faz bem, principalmente quando abre um leque de novas possibilidades como aprender outras várias funções incríveis que o Post CSS trás.

Conclusão

Caso alguém me pergunte se vale a pena mudar o workflow apenas para escrever variáveis de forma nativa?

Talvez a resposta seja não.

Agora, se alguém perguntasse se vale a pena brincar com uma coisa nova, que no fim das contas vai me ensinar sobre pós-processadores, me apresentar uma especificação que pode virar padrão no futuro e me fazer refletir sobre formas diferentes de fazer a mesma coisa?

Nesse caso a resposta é um imenso SIM.