Variables in CSS via PHP
UPDATED: Added support for expressions with variables so that you can add, multiply, divide, etc. variables when using them in the CSS. See below for more info.
Back in April of 2008, I came across a proposal by Daniel Glazman and David Hyatt for using variables in CSS stylesheets. I thought the proposal was absolutely brilliant, filling a much needed void for sites using complicated stylesheets across a variety of different pages. Another part of their proposal was being able to include/import other stylesheets. I don’t know anyone that couldn’t find this useful.
I put together a quick class for implementing most of their proposal using PHP. Nothing fancy going on here, most of it is some simple regexes.
Using the CSS Compiler
Let’s first talk about how to setup your CSS stylesheets to use variables and imports.
Important: Any stylesheet that uses variables or includes stylesheets that use variables must end with the extension ‘.cssp‘.
To declare variables, you place them within an @variables at-rule like so:
@variables
{
titleFont:bold 18px "Verdana, Arial";
titleBG: #FF0000;
}
To use the variables:
div.title { font: var(titleFont); background: var(titleBG); }
Couldn’t get much simpler.
Importing CSS and Variables
You can also import/include css and variables from an external stylesheet using @import:
@import "vars.cssp";
div.title { font: var(defaultFont); };
Alternately:
@import url("vars.cssp");
div.title { font: var(defaultFont); };
Evaluating Expressions
You can also perform math operations with measurement units. For instance, you could do something like:
@variables {
lc_width: 240px;
rc_width: 180px;
all_padding: 20px;
}
#some_div {
width: eval((lc_width+rc_width)-(all_padding*2));
padding: eval(all_padding/2);
}
You can only do this with px/em/% measurement units and the units must match. For instance you can’t add a variable that is 2em with another that is 120px. Doing so will throw an exception. Also, if you use a variable reference that doesn’t exist, it will also throw an Exception.
Using in HTML Pages
To use these stylesheets, you’re going to have to write a little PHP, but not too much:
<?
// include the compiler
include 'css_compiler.php';
// set the compile environment variable
// otherwise it will spit out a static file
// in a production environment comment this out:
define('COMPILE_CSS',true);
?>
<html>
<head>
<? style(dirname(__FILE__),'testing'); ?>
</head>
<body>
<div class="nice">Hello World</div>
</body>
</html>
At the top of this file, we’re including the css compiler and then defining a global variable COMPILE_CSS. COMPILE_CSS tells the compiler to do the compilation and save the resulting .css files. You will not want to do this in a production environment, so comment out the define when deploying to the masses.
In the head tags, the style() function is a helper function that compiles the css. The first argument is the full path to where the css is. The second argument is the css file to use without it’s extension. Note: if your css files have a relative path of /css/whatever.css on your webserver, the relative path should be part of the second argument and not the first.
For example, let’s say our PHP application is located at /var/www/. Our css files are located at /var/www/css/. Our style function is going to look like:
style('/var/www/','/css/testing');
Our actual usage of this code at massify is way different. I’ve added the style() function so that people reading this blog can use it, but you should definitely do your own legwork to blend it into whatever framework you are using. This should be enough to get started however.
Also, make sure that your css directory is writable by your webserver or the whole thing won’t work at all.
Leave a comment or drop me a line if you find this useful/find bugs/have suggestions.
Enjoy!
Loading ...