Variáveis no CSS – Breve

Variáveis no CSS, em breve, perto de você.

por Diego Eis 18/06/2012

Escrever variáveis no CSS é uma das features mais esperadas nesses últimos tempos. Préprocessadores como SASS e LESS já disponibilizam este recurso, mas ter essas facilidades no próprio CSS, sem a necessidade de utilizar qualquer outra ferramenta é muito mais do que útil.

O WebKit tem trabalhado nesse assunto utilizando a documentação do W3C. E provavelmente já teremos daqui um tempo a possibilidade de utilizar variáveis em browsers que suportam webkit. Se os outros browsers andarem rápido, como o Webkit, muito em breve teremos full-support em todos os browsers, obviamente, browsers antigos ficarão fora dessa. E quando eu digo antigo, incluo até o IE9 e talvez o IE10 e também outros browsers conhecidos. Mesmo assim, com menos risco, já que os outros browsers tem auto-update.

Sintaxe

A sintaxe é simples, embora eu não tenha gostado.

[cc lang=”css”]

:root {

var-title-color: green;

}

h1 { background-color: var(title-color); }

[/cc]

Eu começaria tirando o (traço) logo depois da palavra var. Assim fica parecido com Javascript.

Você pode nomes juntos também, sem problemas.

[cc lang=”css”]

:root {

var-FontSizeArticle: 13px;

}

article { font-size: var(FontSizeArticle); }

[/cc]

O Webkit tem dado alguns exemplos de código aqui. A documentação ainda está bem no começo. Mesmo assim, do jeito que as coisas estão andando rápidas, variáveis no CSS estarão presentes na casa de toda família em breve.