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 }

8 thoughts on “variables in css

  1. I’d like to try out your script, but the link to the “txt” version of your PHP script fails. In advance, thanks for the awesome work.

  2. Pingback: Best Of October 2007 | Best of the Month | Smashing Magazine

  3. Pingback: { Studio Rhoad } Media Design & Photography» Blog Archive » Best Of October 2007

  4. Pingback: Andra P žurn?ls » Blog Archive » Dinamisks CSS ar main?gajiem

  5. Pingback: Bookmarks Tagged Php

  6. Pingback: Reviewing Sass, a Dynamic CSS Language | 10e20

  7. Pingback: Reviewing Sass, a Dynamic CSS Language | MarketingTypo.com

Comments are closed.