CSS com variáveis

//

Tatiane Pires

Esse é um assunto em que as opiniões se dividem. Há quem defenda que CSS não deve ter variáveis porque não é uma linguagem de programação. O fato é que, à medida que um site requer arquivos CSS mais extensos, torna-se mais evidente a necessidade de utilizar recursos para simplificar o código.

Less é uma das ténicas para tornar o CSS dinâmico com variáveis e funções. O uso dessa e outras técnicas requer etapas adicionais em algum momento da codificação. Por isso o ideal é que esses recursos façam parte da especificação da linguagem.

O W3C tem uma proposta para adicionar variáveis[1] ao CSS que está sendo implementada no engine[2] Webkit, utilizado pelos navegadores Google Chrome, Safari e outros[3].

Declaração da variável

:root { 
    var-cor-base: #06C;
}

Utilização

.elemento { 
    color: var(cor-base);
}

No entanto, ainda é necessário utilizar o prefixo -webkit-.

Declaração da variável

:root { 
    -webkit-var-cor-base: #06C; 
}

Utilização

.elemento { 
    -webkit-color: var(cor-base); 
}

À medida que os engines dos principais navegadores implementarem variáveis, o uso dos prefixos irá se tornar desnecessário. Isso não deve ocorrer tão rápido, mas as especificações do W3C já vão em direção ao uso das variáveis.

[1] W3: CSS Variables
[2] Engine: componente de software que combina o conteúdo (HTML, XML, arquivos de imagem, etc) com informações de formatação (CSS, XSL, etc) para exibir o conteúdo formatado na tela.
[3] Wikipedia: List of Browsers

Deixe um comentário