Em um passado não tão distante, pudemos presenciar como o HTML5 incorporou recursos de outras tecnologias em seu padrão. Podemos citar os exemplos simples, como verificação de campos obrigatórios de formulários (que antes eram feitos com JavaScript) e vídeos nativos na Web (adeus RealPlayer e Flash).

Esse tipo de incorporação já vem sendo feita também pelo CSS. Basta lembrar que hoje não declaramos mais atributos para formatação visual no HTML e que animações que antes eram feitas em Flash ou JavaScript, hoje podem ser feitas com CSS puro.

Apesar da evolução constante do CSS, certos recursos se fazem necessários para ajustes específicos que ainda não foram implementados na documentação ou não foram amplamente suportados por navegadores. Para ajudar nesse trabalho, surgiram extensões como SASS, que possibilitam, por exemplo, utilizar variáveis na construção das folhas de estilo.

Desde 2012 o Grupo de Trabalho de CSS do W3C vem trabalhando para a utilização de variáveis dentro do CSS. Atualmente, a documentação “CSS Custom Properties for Cascading Variables Module Level 1”, que especifica o uso de variáveis no CSS, está como W3C Candidate Reccomendation.

Apesar de ser uma discussão razoavelmente antiga (e já existirem diversos artigos abordando o assunto), a implementação de varáveis nativas do CSS nos navegadores* começou há pouco tempo:

• No Firefox começou a ser implementada na versão 31 (lançada em julho de 2014);
• No Chrome foi implementada na versão 49 (lançada em março de 2016);
• No Safari em sua versão 9.1 (lançada em julho de 2016);
• Nas versões mais recentes da maioria dos navegadores de dispositivos móveis.
• Por enquanto Internet Explorer e Edge ainda não implementaram esse recurso.

*Dados obtidos do CanIUse.

Seu uso é muito simples. Utilizando a notação var() é possível selecionar uma variável já declarada, como no exemplo abaixo:

:root {
  --main-color: #06c;
}
#foo h1 {
 color: var(--main-color);
}

Nem preciso dizer que a grande vantagem aqui é não ter mais que declarar diversos valores no meio do código. A declaração pode ser feita em qualquer seletor, mas fazendo em :root ela serve para o documento inteiro.

Os seletores específicos podem ajudar em diversos cenários, como por exemplo na internacionalização do conteúdo (identificando o idioma do documento ou do elemento), como no exemplo abaixo:

a:lang(en) {
      --external-link: "external link";
    }
a:lang(pt-br) {
      --external-link: "link externo";
    }
a[href^="http"]:after {
      content: " (" var(--external-link) ")";
}

Fazendo dessa forma, quando o idioma do elemento de âncora for declarado os links externos receberão o complemento de informação de “link externo” no seu respectivo idioma (este e outros exemplos estão disponíveis na documentação do W3C).

As folhas de estilo também têm acompanhado a evolução da Web e as suas necessidades. São essas necessidades que geram produtos como SASS e LESS e que podem levar seus recursos que facilitam a vida do desenvolvedor para a raiz do CSS. E são essas demandas que contribuem para as discussões e evoluções dos padrões dentro do W3C.