CSS preprocessor for variables, nested selectors and other goodies

Monday, July 14th, 2008 at 7:49 am

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;

}