Tableless

Busca Menu

Variáveis no CSS – Breve

Seja o primeiro a comentar por

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.

Publicado no dia