Skip to content

CSS preprocessor

Today I’ve been working on a little website project, just for fun. Once again, I wish there was some good CSS preprocessor available, as sometimes (especially during development, before cleaning up the CSS) you need to alter several values in several places to change one little thing.

Some examples:

  • Change some font color, which is used in several classes
  • Change size of objects (eg. if you got 3 divs, which need to span 100%, and originally they were 33% 33% 34%, and you want the first one to be 50% and split the remaining space between the other divs, you need to edit all 3 values)

This makes editting CSS files very error-prone.

A neat solution for this would be some sort of CSS preprocessor, so you could do things like this:

#define COLOR1 black
#define COLOR2 #ABABAB

.foo {
width: 40%;
color: COLOR1;
height: 10px;
.bar {
width: $(100% - .foo.width);
height: $(2 * .foo.height);

This is, obviously, just a sample of what could be possible.

Did anyone ever work on something alike, or got some other method to tackle this?

Posted in Webdesign.

19 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. hario says

    Why don’t you (ab)use the C preprocessor? You can preprocess the CSS snippet in your post using the following:

    $ cpp -P output.css

    If you want to preserve comments, add the “-C” flag in the command line and you’re done! Sometimes I use the C preprocessor myself for this kinds of simple text expansion :D

  2. Søren Hauberg says

    Can’t you just use the good old ‘m4′ preprocessor? We use that for creating HTML at, and it works like a charm.

  3. Ed Schouten says

    Just use the C preprocessor for that?

  4. bassam says

    I’ve used the c preprocessor for html (as have many others- I stole the idea from googling for an html preprocessor); it works fine with a caveat here and there (and some extra warnings to ignore) I don’t see why you wouldn’t use the same trick for CSS. google for HTML preprocessor, and you’ll likely find some working examples with suggestions for gcc flags to use, etc.

  5. soroosh says


  6. Nicolas says

    Obviously cpp could be used for very basic variables (like COLOR1 in the sample). It doesn’t allow any of the other features I mention.

  7. mmc says

    I used the template toolkit.

  8. Wouter Bolsterlee says

    I’ve implemented a CSS preprocessor as a Makefile snippet that calls cpp:

  9. Uzytkoenik says

    You can always use erb or some similar method (php cli etc.). Then you can add functions you need (if you prefere clean design write them first).

  10. Pavel says

    xml elements can have several css classes, so you can create template css classes holding only one variable. no preprocessor needed for that.

  11. Nicolas says

    I know that’s possible. This still doesn’t allow calculations inside your CSS files though, and could introduce a huge amount of (unnecessary) classes. Even in relatively small stylesheets/sites it can become hard to know which stylesheet is used by which elements in the site.

  12. Matthew W. S. Bell says

    If you’re using the same font colour in more than one class of things, you should split that properties section out and use multiple selectors:

    .foo, #bar .baz, .bar:hover {
    color: #defaced;

    .foo {
    height: 100%;

    .baz {
    height: 500em;

    Obviously, this isn’t the only use case for a preprocessor.

  13. Stefan Georg says

    why not just include style.php as your CSS file where you define $COLOR1 = “BLACK”; then where you need it
    font-color:= or use whatever scripting language your server supports?

  14. Nicolas says

    Stefan: Because my scripting framework/language (Django/Python) doesn’t allow in-template calculations etc. I’d just like some offline functionality.

    The main issue, being able to refer to other element properties, is still not solved.

  15. James says

    Try p4, the Perl based macro processor.

  16. nate says

    Please check out CSSPP

  17. zalun says

    This should solve your problem

Some HTML is OK

or, reply to this post via trackback.