01 Oct

variables in css

There is an article over at the Ruby On Rails site about Dynamic CSS. I read through it, and it was pretty cool. It occurred to me that it should be fairly simple to do some of those tricks on-the-fly with ordinary CSS files and a little PHP.

Look at this:

!BORDER        1px solid #369

h1 { color: !TEXTCOLOUR; font-size: 1.1em }
p { color: !TEXTCOLOUR; font-style: italic }
div { color: !TEXTCOLOUR; border: !BORDER }

This, of course, is not valid CSS, but it would be cool if it worked.

Now it does!

Save this as /css_parser.php on your site:


if(!isset($_GET['css']))exit('/* please supply a "css" parameter */');

if(strpos($filename,'..')!==false)exit('/* please use an absolute address for your css */');
if(!file_exists($filename))exit('/* referred css file does not exist */');


foreach(array_reverse($matches[0]) as $match){
  $match=preg_replace('/\s+/',' ',rtrim(ltrim($match)));

header('Cache-Control: max-age=2592000');
header('Expires-Active: On');
header('Expires: Fri, 1 Jan 2500 01:01:01 GMT');
header('Content-type: text/css; charset=utf-8');

echo str_replace($names,$values,$file);

Then put this in your root .htaccess file:

RewriteRule ^(.*)\.css$ /css_parser.php?css=$1.css [L]

Isn’t that just so cool!? Now, every time you request a file that ends in .css, it will be pre-processed by the css parser.

The trick doesn’t have to be strictly about the value part of the CSS either – you can use it for full commands:

!BlueText    color:#00f;
!Underlined  text-decoration:underline;

a { !BlueText !Underlined }

And if that’s not enough – you can also use the variables to define other variables:

!SelectedColour     #00f
!Text               color:!SelectedColour;
!Border             border:1px solid !SelectedColour;

p{ padding: 10px; !Text }
div{ !Text !Border }