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

This entry was posted on Monday, July 14th, 2008 at 7:49 am and is filed under css, hack. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.