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>