Simple CSS Preprocessing with cpp

Sometimes when prototyping a quick, small app, I find myself wanting a subset of Sass’s features without everything. Specifically, I love having variables available, and the option to split into multiple files for organization.

Then I read this post and wondered how I could use cpp towards such a goal. The answer is pretty simple. An example app.css file:

#define $text_color #333
#define $border_color #eee

#import "comments.css"
#import "posts.css"

And in posts.css:

.posts .post {
  border: 1px solid $border_color;
}

Running cpp -P app.css outputs the following:

.posts .post {
  border: 1px solid #eee;
}

This is no “replacement” for sprockets or sass, but a nice trick to have up your sleeve!

—May 17, 2014