Posted: 18 March 2012
Tags: mako, blogofile, css, hacks

I was writing a bunch of CSS for "styling" (ahem) this website, and after typing the same color constant a couple times, I decided there had to be a better way. I poked around looking for CSS+template stuff (like sass), but it then dawned on me that if I just put a .mako suffix on my CSS file, then blogofile would run it through Mako. And mako has support for simple variable substitutions like ${color_bg}.

So, at the top of my .css.mako file(s) I have something like:

<%
color_fg = '#D00'
color_bg = '#0D0'
# ...
color_link_visited = '#123'
# etc ...
%>

And then through-out the CSS file I can do things like:

html { 
    margin: 0;
    background: ${color_bg};
}

There are two benefits from this. First I can have the colors together in one place, at the top of the file, so messing with them is relatively easy (as often changes to one color imply changes to other colors). And second, if bunch of elements use the same logical colors, its only defined in one place.

Of course, similar things could be done for margins, widths, font-size, etc.