Monday, 31 October 2011

Variables in CSS File (Dynamic CSS)

Problem: Using CSS Variables/Dynamic CSS;

Firstly, I am aware that using variables in CSS seems to be topic for many a forum and blogs alike, W3C have not to my knowledge implemented variables in full within CSS as it breaks the segregation between Stylesheets and logic/script files (php etc).
Using variables is CSS has been somewhat of a minefield with entire articles and dedicated web pages on the matter. Not that these are bad in anyway, as they are, in the author's opinion, a way of producing the desired result. It is just my opinion which says these methods are, at time, very long winded and are quite 'fatty'.
Most requests for such variables in CSS are based around outputs from database queries, corporate colour schemes was my driving force and seems to be the case for the majority of reasons for the CSS variable request.
What i aim to provide with the solution i found, is a very lean and simple to use way of using variables within CSS styling.

I come back and edit this in the near future and give you a working example of my colour scheme mySQL database table, create script and a site i used to generate the perfect tones that i required, but for now, this is the workings of "PCSS" (php CSS file).
  • Create a php file called PCSS.php
  • Paste this code into the file:
1:  <?php 
3: $PCSS = getPCSS();
4: header("Content-type: text/css");
5: echo $PCSS;
8: ?>

  • Create a function called "getPCSS()" - Remember to insert this before the "?>" php closure tag.
  • Within the getPCSS function, write your db extract routine or variables you wish to dynamically use within a CSS file.
  • Save and close the file.
  • Open and edit the file that you wish to include the dynamic CSS within and point a new link to the new PCSS.php file (example: )
  • Thats it!
I said it wasn't going to be difficult, and in my opinion, this is the leanest way of producing the desired result.
The simple "header("Content-type: text/css");" tells the PHP file to return the content as CSS, which means you can have functions, variables, db queries etc within this file, but the return of function "getPCSS()" will pass CSS to the browser.

I could give you a bench mark, but to be honest, the results are subjective to the size of your PCSS.php file, subsequent db queries etc and performance will vary. However, with that said, an average time for my PCSS.php file to query 30 colours from 1 table, build 15 different CSS names/classes for each colour, which is around 1200 LOC, takes around 200ms.

As said, i will give you a working db example using a colour scheme which is the most common reason to require dynamic CSS (I didn't want to remember the 30 different colours and shades HTML colour codes).

If you think my post is good, or have any questions, please feel free to drop me a comment and I will get back to you.

Aaron Harrison - New Blog Contributor

Hello World!

I have recently been working with Matthew Sims over at and was asked if I wanted to contribute on their blog. I thought sure, sounds good and its probably long overdue to give back to the web community what I have taken from it over the years.

I have an array of solutions for everything from simple Excel problems/quirks, VBA solutions utilizing Windows APIs, Microsoft Word solutions/automation's, right through to solutions for web development problems which have stumbled many developers.
This means, you should begin to see various posts from myself, as well as the posts from Matt.

Just a heads up, I will be creating a post about a solution I created for "Dynamic CSS" files, i.e using php variables etc within a CSS file. I hope to get it posted today so keep your eyes peeled ;-) (here it is)

Well, enough about me. You should check-out, they have services and solutions for many ICT requirements and could be just what your looking for. Matt is a very knowledgeable professional with a vast and dynamic background which brings a wealth of experience.

Hope you find my posts easy to follow, useful and informative. If you have any questions or feedback (please, be gentle), feel free to leave a comment.