Annoyed by CSS’s lack of #define style constants, and looking for an excuse to try out with the Google App Engine, I started building with a simple app to provide a simple CSS constant expansion service a few weeks back. It’s now up and running at http://www.constantcss.com/ if anyone would like to try it out.
The service is only intended for use while tweaking your design. You’ve got to be logged in to the site to actually fetch the updated CSS file (to avoid allowing people to use the site to serve up their site’s CSS file), but it does provide a cute tweaking option by reading parameters out of the referrer URL, meaning you can tweak the CSS without changing the actual CSS source in the web page.
Here’s a very simple example of the constant syntax.
/* @cssconstants
@define NORMAL_SIZE 10pt
*/
p {
font-size: /*NORMAL_SIZE*/10pt/*NORMAL_SIZE*/;
}
It isn’t elegant, but is nice in that
- The values can be updated without ever losing the information about which constants occurred where, which makes the tweaking workflow a bit smoother.
- The file itself is still valid CSS, so you can serve it up with the constants still in there if you like.
- If I ever go away, you could pretty easily update it with just a text editor which can do simple regular expression replacements.
The source code is also available in a git repository at http://github.com/mattsheppard/constant-css/tree/master if anyone wants to run their own version or make improvements. This is my first time using Python and Git as well, so I imagine there are currently many things being done poorly, and any pointers are more than welcome.