CSS Variables using PHP

CSS Variables using PHPThis article describes how you can use CSS variables using PHP. CSS variables have been often requested but opinions differ whether the CSS language should support them or not.

W3C Editor’s Draft

As a web designer, I am sure, you have run into the situation where you wished CSS would support variables. Such a feature has been discussed for quite some time but has not yet lead to a final implementation in CSS.

Ideas are discussed and the current W3C editor’s draft suggests a way of how it could implemented.

“This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply
endorsement of its contents by W3C.”
Tab Atkins Jr. (Google), CSS Custom Properties for Cascading Variables Module Level 1, September 2013

The draft describes a way of how it could be done. You can define variable values for singe style elements. Definition and reference of such a variable differ from each other.
It takes a bit to wrap you head around it.

Here is an example:

I’d rather see a classic $variable that I can fill and reuse but the approach in the draft has it’s advantages too. However, it would really kick in if you could define complete style blocks like that.

Something like this (just my idea):

Using PHP

Until there is a reliable and supported W3C standard available, there is a way using PHP to achieve powerful use of variables in CSS. It makes use of the PHP header() directive telling the script that is is actually a style sheet. Thus, you can create a PHP file that actually functions as a CSS file, e.g. style.css.php:

Since the script is interpreted as PHP, you can of course also define variables and insert those anywhere else in the file:

PHP variables can contain a whole set of styles too, making it easy to assign them in one shot:

Preparing skins with PHP

You can even take it one step further and prepare several PHP files with different values for the same variables. That way you can prepare different “skins” that you can quickly switch to. Prepare as much PHP skin files as you like and include the one you want in your css.php file:

Skin 1 File (skin1.php)

Skin 2 File (skin2.php)


LESS – The Dynamic Stylesheet Language

LESS is a new technology that more and more finds its way into modern webdesign. It basically does the same as the above described solution of using CSS variables using PHP, only that it uses its own language. That language, LESS, also supports variables and functions that you can use to dynamically create your CSS file. But still, as above, the CSS files needs to be compiled in the end and given to the browser as such to render it. With LESS this can either be done on the client side using Javascript or on the server side using ‘lessc’, at tool that you need to install for that purpose.

I cannot see a real advantage over the PHP solution yet other than that the PHP code is always executed while you can use LESS for development only and pre-compile the CSS when you’re done. But that is not much dynamic styling then anymore but only a helpful development tool. As soon as you use dynamic style changes online you have to re-compile your LESS code or re-interprete your PHP code. The result is the same.

But LESS is a cool approach for dynamic stylesheets as well and becomes more and more popular, like in Joomla templates for example. LESS is very well documented on their website. It’s worth checking it out.