CSS com variáveis, sem pré-compilação

Acabei de terminar uma simples busca / substituição de pré-processador de javascript para css que chamo de jcss.

Ele permite que você use $ names em lugares onde normalmente usaria valores . Eu normalmente me pego alterando valores em muitos locais em meu css, e fica muito cansativo se eu tiver vários arquivos.

Dito isso, o SASS ou qualquer variante como essa é a melhor solução, mas é uma solução rápida sem pipeline para pequenos projetos e prototipagem.

Leia mais aqui: https://github.com/AlexanderBrevig/jcss

Aqui está um exemplo simples de index.html que usa estilo embutido e carregamento de vários arquivos de arquivos .jcss:

<!DOCTYPE html>
<html lang="en">
<head>
<title>JCSS sample</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="jcss.js"></script>

<script type="text/javascript">
JCSS
.files = [
'style.jcss',
'otherStyle.jcss'
];

JCSS
.styles = {
bodyBg
:"#adaead",
textColor
:"#104321"
};
</script>

<script type="text/jcss">
/* inline style */
body
{
background
-color: $bodyBg;
}
</script>

</head>
<body>
<h1 id="header">Test</h1>
<p>This is a test para</p>
</body>
</html>