Como utilizar variáveis no CSS
Postado por: Pedro Rogério emEnquanto somente o WebKit aceita temporariamente o suporte a variáveis em CSS eu sigo por uma busca incessante atrás de uma forma, e acabei a encontrando com a utilização de jQuery.
cssWithVars leva o conceito de Orientação a objetos ao CSS onde você pode reutilizar código de forma efetiva. A utilização é muito simples, primeiro devemos criar a nossa variável em nosso CSS:
variavel1 {
float:left;
font-size:1em;
}
O 2º passo é chamar a variável no lugar da declaração das propriedades dentro de chaves []:
h1 {
[variavel1]
}
Vejam só nesse exemplo criado o css funcionando através de variáveis. Preste muita atenção que você dever adicionar os seguintes arquivos a sua página para que ela funcione corretamente:
<script src="jquery-1.3.2.js" type="text/javascript"></script> <script src="jquery.utilities.js" type="text/javascript"></script> <script src="jquery.createCSSwithVars.js" type="text/javascript"></script> <link rel="stylesheet" href="caminho/do/css.css" type="text/css" media="csswithvars" />
No exemplo foi utilizado a última versão do jQuery, a 1.3.2, plugin jQuery Utilities, o plugin jQuery createCSSwithVars, e o arquivo CSS com o media type csswithvars.
Download
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Interessante mesmo, para aqueles que queiram deixar o código css validado, não terá como.
E isso é compatível com todos navegadores?
abs
@Vagner,
Sim, testei nos seguintes browsers: IE6, IE7, IE8, Firefox 3, Google Chrome, Safari 4, Opera 10 e funcionou corretamente pois ele utiliza Ajax para ler as variáveis que você criou no CSS.
Má idéia, exceto, talvez, em algum web app que já seja por si só dependente de javascript. Para todos as outras ocasiões este é mais um exemplo de javascript obtrusivo, basta verificar a página de teste com o cssnolanche.com.br na lista negra do noscript…
@Thiago tem razão. Ter que incluir aqueles arquivos todos ali, somente para quem já tem a página usando jQuery a toda.
Mas se isto fosse nativo, seria ótimo.
Olá Pedro rogério
Muito interessante esse metodo usando jquery.
Recentemente o site nettuts postou um tutorial para o uso de variaveis usando o php, montando o css:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-add-variables-to-your-css-files/
Com temos muitos navegadores web existe para a engine WebKit variaveis, mais acho que não vai validar também. Mais a forma é algo tipo
/* Declarações*/
@variables {
cor_link: #777777;
}
/*Uso*/
a {
color: var(cor_link1);
}
Muita mão de obra. Muito código, muito plugin, muito arquivo, muito tudo.
Tem que estar desesperado por variáveis.
Tomara que logo todos estejam aceitando as variáveis do jeito “nativo”, exemplificado pelo Sérgio.
Já tem 2 anos este post, talvez hoje já esteja pronto pra uso isso aí e eu nem sei.
Esse plugin cssWithVars é fraco se comparado ao Less CSS: http://lesscss.org/
Esse sim implementa outrs aspectos de orientação a objetos além de variáveis.