CSS with variables

>The problem is I have say a width or a color that I use again, and again. When I want to change that value just a little bit I have to do it everywhere. So using this technique I can assign all of my values in one spot and then use those values in a css sheet. Ultimately the final setup would use a static css sheet.

To do this you need a cgi executable directory setup, python and either override access or access to httpd.conf (prefered). So I choose my directory where I put my .css files, and make a handlerApache's website.

<Directory "/site/resources">
	AddHandler style-css .css
	Action style-css "/cgi-bin/cssserv.cgi"
</Directory>

Once you have a handler you need to make the script that will render css files with Cherrytemplate.

I chose cherry template because it is very easy. You don't even need a templating engine but this allows me to assign variables in the .css document.

#!/usr/bin/env python 
import os,sys
sys.path.insert(0,'/site/cgi-lib') #path to cherry template
import cherrytemplate

print "Content-Type: text/css\n\n"
print "/*This file has been rendered by CherryTemplate*/"
print cherrytemplate.renderTemplate(file=os.environ['PATH_TRANSLATED'])

Cherrytemplate is so simple I download it, unarchive it then take the cherrytemplate.py file and put it in the cgi-lib directory so I can import it.

There are a couple ways to do this, easiest being to use python setup.py install.

Now any .css file I put into the 'resources' directory will be rendered. So here is an example .css file.

<py-code="
#set variables here
borderA = '3px solid #00A'
sideWidth = '1em'
contentWidth = '45em'
">
#title{
	position: relative;
	left: <py-eval="sideWidth"/>;
	border: <py-eval="borderA"/>;
	width: <py-eval="contentWidth"/>;
}
#links{
	position: relative;
	left: <py-eval="sideWidth"/>;
	width: <py-eval="contentWidth"/>;
	border-bottom: <py-eval="borderA"/>;
	border-left: <py-eval="borderA"/>;
	height: 1em;
}
#content{
	position: relative;
	left: <py-eval="sideWidth"/>;
	border: solid blue 1px;
	width: <py-eval="contentWidth"/>;
}

This is a little bit of a Zombie .css file. I took one I actually use and cut out a bunch of material. The idea is that I can change the sideWidth and every element will automatically have the side width set. Since the text is replaced you can do a lot with this.

Finally you might not want to use cherrytemplate in the end. Once you get set up you probably want to serve your .css statically. So in that case you can view the file after it has been templated, save as and voila you have an outputed .css file. Then