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.