Last Updated: February 25, 2016
· alexanderbrevig

CSS with variables, without precompilation

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.

Read more here: https://github.com/AlexanderBrevig/jcss

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

<!DOCTYPE html>
<html lang="en">
  <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 = [

  JCSS.styles = {

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

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