Christian Heilmann

Posts Tagged ‘preprocessor’

CSS preprocessor for variables, nested selectors and other goodies

Monday, July 14th, 2008

Nate Skulic just emailed me about CSSPP, a CSS preprocessor inspired by my CSS wishlist and CSS constants article.

Nate’s done a great job writing a CSS preprocessor that could be handled by mod_rewrite and allows for:

  • constants in CSS (define a colour or setting and call it by name)
  • variables in CSS (define a setting and override it with URL parameters – I got to check if this is safely filtering out XSS nasties)
  • inheritance (nesting selectors)

I especially like that he allows for classes to be added to the parent selector or applied as a child by using a single or double full stop:


body {
..blue {
background:blue;
}

..red {
background:red;
}

.box {
background:green;
}

h1 {
font-size:1.6em;
}

h2 {
font-size:1.4em;
}

}

Produces the following:


body.blue {
background:blue;
}

body.red {
background:red;
}

body .box {
background:green;
}

body h1 {
font-size:1.6em;
}

body h2 {
font-size:1.4em;
}

Top to off the usefulness the systems also comes with a smart caching system. Nice job!