Using variables in CSS

I’m working on a little PHP script to allow for variables and inheritance in CSS. I know there’s a ruby script that does this somewhere, but I fancy seeing if we can’t get a pure PHP version up & running between us. If you’re somebody that writes their own CSS and are willing to have a play with it to see what problems occur then I’d really appreciate it. If you want to tighten up my regular expressions a bit as well then it probably won’t go amiss, as I’ve only spent 5 minutes on them so far 😉

It’s fairly straightforward, and at the moment just runs some simple find & replace on a stylesheet, nothing too fancy, and it seems to hold it’s own on my dev server, but I’d be interested to see if it works in the hands of others. I don’t have much spare time but will be adding attribute inheritance next – which could be very cool.

you can grab the PHP here, and implement it by saving it as PCSS.php (or whatever you choose) and then linking to your stylesheet as follows:

[html]
css" media="screen" rel="stylesheet" />
[/html]

In case that isn’t clear – instead of linking to your stylesheet within the tag, you link to my PHP file and then tag a ‘?’ and the filename of your stylesheet onto the end.

once running you can declare variables in your stylesheet ‘thusly’, ensuring each begins with a $ and ends with a  line-break:

[css]
/*
$pie_blue = #443300
$pie_border = 1px solid #CCC
$pie_padding = 1em
*/

.class {
color: $pie_blue;
border: $pie_border;
}
[/css]

and so on…

Again, if anybody does pick this up and play with it, I really appreciate the time and help.


Posted

in

, ,

by

Tags:

Comments

2 responses to “Using variables in CSS”

  1. Ted Gueniche avatar

    I know it’s an old post, but I love the concept!

  2. Neil avatar

    It’s used a lot in SASS and LESS – but nothing appears to be out there for PHP.

    Thanks for the comment though!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.