You're viewing a single post. I have much more to say! The main blog page is a good starting point.

A simple preprocessor for CSS files

Sunday, December 23, 2007 ★ 21:29 ★ Category Programming

Anewt, the Almost No Effort Web Toolkit (a collection of PHP libraries designed to aid rapid web development, mostly written by me), offers a simple preprocessor for CSS files, implemented as a Makefile. It is available from the scripts/ directory in the anewt.uws bzr branch, but for your convenience I’ve put up a snapshot over here: css-cpp.make

This Makefile acts as a simple preprocessor for CSS files. It uses the C preprocessor (cpp) to do the actual work. Using this file allows you to use variables (eg. aliases for color names, lengths, sizes, or sets of common properties) in your CSS files.

Since cpp and CSS both use the # character for different purposes, simple substitution (with a very unlikely string) will be done before actually invoking cpp. The % character is used to call cpp directives, so #define and #include become %define and %include, respectively.

Sample input:

%define MY_SHADE_OF_RED  rgb(196,   0,  12)
%define MY_SHADE_OF_BLUE rgb( 10,  42, 240)
html {
background-color: MY_SHADE_OF_RED;
color: MY_SHADE_OF_BLUE;
}

Sample output from the above sample input:

html {
  background-color: rgb(196,   0,  12)
  color: rgb( 10,  42, 240)
}

Usage is simple. First you need to create files with a .csst (CSS Template) extension. The corresponding .css files will be generated automatically, overwriting the existing .css file with the same name. This file may contain defines, includes, and so on.

Now, symlink or copy this file as “Makefile” into the directory containing the .csst and .css files. Then run make:

$ ln -s /path/to/anewt/scripts/css-cpp.make Makefile
$ make css

Alternatively, call make with a parameter:

$ make -f /path/to/anewt/scripts/css-cpp.make css

Or just execute this file from the right directory:

$ /path/to/anewt/scripts/css-cpp.make css

If your own project also uses a Makefile, you can include this file. To do that, put the following line into your own Makefile:

include /path/to/css-cpp.make

Then you have your own targets depend on the targets in this file:

all: css
clean: clean-css

Enjoy!

(This message is based on the comments in the source file, which may be updated in the future. This snapshot is posted to my blog in response to Nicolas Trangez who asked for a CSS preprocessor)