Variáveis CSS: tutorial das custom properties

Variáveis CSS: tutorial completo das custom properties

As CSS Custom Properties (mais conhecidas por variáveis CSS) são um grande avanço para o desenvolvimento front-end. Trazem a potência das variáveis para o CSS, o que se traduz em menos repetição, melhor legibilidade e mais flexibilidade.

Além disso, ao contrário das variáveis dos pré-processadores CSS, as variáveis CSS fazem parte do DOM, e isso traz muitas vantagens. No fundo, são o equivalente às variáveis do SASS e do LESS. Neste tutorial vou mostrar-te, com exemplos, como funciona este módulo do CSS3.

Porquê usar variáveis CSS?

Há muitas razões para usar variáveis em CSS. Uma das mais convincentes é que reduzem a repetição na tua folha de estilos.

Método antigo

css

#title {
    color: #ff0000;
}

.h1 {
    color: #ff0000;
}

Método novo

css

:root {
    --red: #ff0000; /* Déclaration d'une variable css */
}
#title {
    color: var(--red); /* Utilisation de la variable css */
}

.h1 {
    color: var(--red); /* Utilisation de la variable css */
}

Além de tornar o código mais fácil de ler, isto dá-te muito mais flexibilidade no dia em que quiseres mudar essa cor.

É verdade que isto já é possível há anos com as variáveis do SASS e do LESS. Só que as variáveis CSS têm algumas vantagens.

Não precisam de ser compiladas para funcionar, porque são nativas do navegador. Não tens portanto nenhuma configuração a montar antes de começar, ao contrário do SASS e do LESS
Vivem no DOM, o que abre um sem-fim de possibilidades que vou percorrer neste tutorial.

Vamos então às variáveis CSS!

Declarar a tua primeira variável CSS

Para declarar uma variável, começa por decidir em que âmbito ela deve viver. Se a quiseres disponível em todo o lado, define-a na pseudo-classe :root. Esta corresponde ao elemento raiz da árvore do documento (normalmente a tag <html>).

Como as variáveis são herdadas, isso torna-a acessível em toda a aplicação, já que todos os elementos do DOM descendem da tag <html>.

css

:root {
    --main-color: #00FF00; /* Déclaration d'une variable css */
}

Como vês, declara-se uma variável tal como se define uma propriedade CSS. A diferença é que o nome tem de começar por dois hífenes.

Para aceder a uma variável, usa-se a função var(), passando-lhe o nome da variável como parâmetro.

css

#title {
  color: var(--main-color);
}

E isso dá ao teu título a cor #00FF00.

Declarar uma variável CSS local

Também podes criar variáveis locais, acessíveis apenas ao elemento onde são declaradas e aos seus filhos. É prático quando sabes que uma variável só vai servir numa ou noutra parte da aplicação.

Por exemplo, podes ter uma caixa de alerta que usa uma cor especial que não aparece em mais lado nenhum. Nesse caso, faz todo o sentido declará-la localmente.

css

.alert {
  --alert-color: #ff0000;
}

Esta variável passa a estar disponível para os seus filhos:

css

.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}

Se tentares usar a variável alert-color noutro sítio da aplicação, por exemplo na barra de navegação, simplesmente não funciona. O navegador ignora essa linha de CSS.

Responsivo com variáveis CSS

Uma grande vantagem das variáveis CSS é terem acesso ao DOM. Não é o caso do LESS nem do SASS, cujas variáveis são compiladas em CSS e só depois lidas pelo navegador

Na prática, isto significa que podes, por exemplo, alterar as variáveis consoante a largura do ecrã:

css

:root {
  --main-size: 16px ;
}
@media all and (max-width: 600px) {
  :root {
    --main-size : 12px ;
  }
}

Com estas quatro linhas simples, atualizaste o tamanho da letra principal em toda a aplicação nos ecrãs pequenos. Bastante elegante, não achas?

Como aceder às variáveis CSS com JavaScript

Outra vantagem de viverem no DOM é poderes aceder às variáveis com JavaScript, e até atualizá-las, por exemplo em função das interações do utilizador.

javascript

var root = document.querySelector(':root') ;
var rootStyles = getComputedStyle(root) ;
var mainColor = rootStyles.getPropertyValue('--main-color') ;
console.log(mainColor); // #00FF00

Para atualizar a variável CSS, basta chamar o método setProperty no elemento onde as variáveis CSS foram declaradas, passando o nome da variável como primeiro parâmetro e o novo valor como segundo.

javascript

root.style.setProperty('--main-color','#0000ff')

Compatibilidade dos navegadores

Todos os navegadores atuais suportam as variáveis CSS, só o Internet Explorer, hoje abandonado, as ignora.

···

CSS

Damien Flandrin Programador web desde 2010, criador da Gekkode e do Email Impact. Cada artigo é testado num projeto real antes de ser publicado. Contacto