CSS preprocessor for variables, nested selectors and other goodies

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!

Tags: constants, css, inheritance, preprocessor, variables