Home

CSS Preprocessor is a preprocessor which extends the CSS language allowing:

• nested rules and attributes,
• variables / @mixin,
• functions,
• strong validation of your code,
• and minifying your CSS code.

What I (Alexis) was primarily looking into was a way to write CSS code that works first time I use it in my browser. Although I may write an incorrect selector, it will be valid CSS code. Most of the errors I found in my CSS files were due to mistyping something such as a field name (font-height) or using a : or ; instead of the other:

// at times, I'm tired and I end up using the wrong field name
font-height: 14pt;

// here the first ';' should be a ':'
font-style; italic;

At this point (version 1.0.0), the compile does not detect invalid field names. However, the ';' instead of a ':' will be detected. There are a few other sych mistakes that I have done over and over and having a preprocessor run against my CSS files before I upload them to my server will save me a lot of time, just as it should save you a lot of time.

Next, I was thinking that having support for nested rules and variables would be wonderful. I found SASS which offers such and based our own syntax on theirs. Thus variables start with the $ character and we support nested rules as well as nested fields:

/* your .scss file to be compiled by csspp */
div.box {
  border: 1px solid black;
  a {
    text-decoration: underline;
    font: {
      style: italic;
      weight: bold;
    }
  }
}

/* the .css output file (expanded version) */
div.box {
  border: 1px solid black;
}
a {
  text-decoration: underline;
  font-style: italic;
  font-weight: bold;
}

Finally, I wanted to use that CSS Preprocessor in my Snap! C++ Websites environment which is written in C++ to run fast and especially have backend processes that can use the compiler to validate CSS data that clients upload (opposed to just themes offered by developers). The CSS Preprocessor is a C++ library. It comes with a csspp command line tool, although that tool is really just a very simple front end tool and not much else. All the functionality of the preprocessor is in the library and one can very easily compile and link against it. And if you are a C programmer, you can also write a simple C++ to C front end to work with the library.

The library supports four output levels from compressed CSS code (as little white space as possible) to beautified CSS code (neatly written human readable code).

Many of the preprocessor features are based on the SASS preprocessor.

We will also look into adding some of the {less} features.

Other Resources

[Where is the Source Repository?]

CSS Preprocessor

CSS Preprocessor sample code

CSS Preprocessor, output of sample code

---

Project Admins:

• Alexis Wilke
• R. Douglas Barbieri