CSS with variables, without precompilation

#css

#design

#javascript

#less

#sass

I just finished a simple javascript search/replace preprocessor for css that I call jcss.

It enables you to use $names in places where you would normally use values. I typically find myself changing values in many locations in my css, and it gets really tiresome if I have multiple files.

All this being said, SASS or any variant like that is a better solution, but this is a quick no pipeline solution for small projects and prototyping.

Here is a simple example index.html that uses inline styling and multi-file load of .jcss files:

<!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>