CSS preprocessor for variables, nested selectors and other goodies
Monday, July 14th, 2008Nate 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!