CSS no Lanche

Enquanto 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

• Download