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.

Solution:
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 
2:   
3:  $PCSS = getPCSS(); 
4:  header("Content-type: text/css"); 
5:  echo $PCSS; 
6:   
7:   
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.