Using PHP to Improve My CSS

Question

I want to make some changes to the way I use my CSS. I want to be able to use variables to define colours or something. So I could do the following

var red = '#FF0000';

And of course red would be replaced with '#FF0000' where appropriate.

How can I do this? I sort of know how, I just don't know the regular expressions or even if this is the best way to do it.

Answer 1

You can do this. Simply write your php into your .css files the way you would an HTML file, and then tell your webserver (probably apache) to parse that file with php.

You could add this to a .htaccess file in your css directory:

AddHandler php5-script .css

However, this is a bad technique as it will slow down the loading of your css files, and prevent end-user caching from making much of a speed difference. It can be a convenient shortcut for websites where you don't care about performance, though.

Answer 2

You could do something like:

style.css.php

<?php
    header('Content-type: text/css');

    $red = '#F00';
?>

body {
    background: <?=$red?>
}

This should work fine.

Answer 3

When faced with this same problem, I placed as much non-changing css into the external css file and echoed the css that changed into the head of the HTML/PHP file. This breaks the desire to have all of your css in external files, but the cost of creating non-standard Apache configurations is not worth the dogmatic need to have external css files.

Answer 4

The best way to handle this is to create some template files, and then have a php script process them and output flat CSS files. You can dig around on the internet and find some nice CSS minimizer, while you're at it, to squeeze out a little more performance. A couple of things to keep in mind:

1) Security - if your builder script will be run via the web, it's probably a smart idea to keep your template files outside of the web root. If it were me, I'd keep both the builder and the templates outside of the web root, and run the builder script from the command line.

2) If your CSS is complex enough that this is really worthwhile, think long and hard about "names for things". $red is not a particularly good name. Since it's now variable, at some point $red might actually be blue (as in #00F)! Every time I've done this, coming up with descriptive names for variables that represent values in a stylesheet has been a real puzzle.

Answer 5

First like Paul McMillan said add this to your .htaccess file (code may be different depending on what hosting company you use)

AddHandler php5-script .css

Second make your whatever.css file look something like (for example, to dynamically change the header background)

<?php header('Content-type: text/css'); ?>
#header {
  background-image: url("http://myurl.com/images/&lt;?php switch (rand(0,4)) {
case 0:
    echo 'green';
    break;
case 1:
    echo 'red';
    break;
case 2:
    echo 'blue';
    break;
case 3 :
    echo 'purple';
    break;
case 4:
    echo 'orange';
    break;
}
?>.png");
}

Answer 6

Perhaps the best way of doing what you are looking for is by using a CSS Framework. Take a look at CSScaffold

You can define constants very easily:

@constants {
  red: #f00;
}

One of the best parts is you can use mixins to include css styles into whatever selector you want.