milesjohnson

I will assume you have a setup like the following, if not you can easily make it work to your needs.

root/
	css/
		index.php // The parser
	js/
	index.php

The first thing you need to do is create a file called index.php within the root/css/ folder. Within this file is where you would load the Compression class, locate the stylesheet and parse it. It is required that you place the parser within the actual css directory or problems will arise. A quick example below.

// Get the path from the query
$stylesheet = (isset($_GET['load'])) ? $_GET['load'] : 'style.css';
 
// Require and initialize
require_once('/path/to/compression.php');
 
$css = new Compression($stylesheet);
$css->bind('img', '/images/');
$css->parse();

The concept is that you would pass this file and the load query within the HTML link element. It's pretty much that easy.

<link href="/css/index.php?load=style.css" rel="stylesheet" type="text/css">

Additionally you can disable or enable caching by using the setCaching() method. The method accepts either boolean true or false. Caching is enabled by default. The destination of the cached files will be relative to the folder of the stylesheet given (/cache/.css).

$css->setCaching(true);

You may also change the way internal variables are used. By default all variables within the actual stylesheet are surrounded by brackets. You may change them using the setDelimiters() method. You MUST call this method before you call bind().

body { background: url("[img]bg.jpg") no-repeat; }

// Change the delimiters
$css->setDelimiters('|', '|');

The most basic concept for this class is the stylesheet variables. The concept is that you can define a variable once using bind(), then just place that variable in your stylesheet so that you have consistent data and do not need to write certain strings multiple times. For example you can define the primary image path and font family, all by using the bind() method.

$css->bind(array(
	'img' 	=> '/images/',
	'font' 	=> '"Verdana", "Arial", sans-serif'
));

The bind() method can either be an array of variables and values, or can be a single variable as demonstrated in the codeblock above. Once you have binded your variables, simply place them in your stylesheet and they will be parsed automatically.

body {
	font: normal 12px [font];
	color: #000000;
	background: #ffffff url("[img]bg.jpg") top left repeat-x; }

Everything should be working correctly now. All you need to do is visit your URL (/css/index.php?load=style.css) to see the compressed stylesheet. If caching is enabled, you can find the cached file at /css/cache/style.css.

A very popular feature that a majority of developers wish was part of CSS would be CSS functions. These would work like regular PHP or programming functions where you can define your functions and pass arguments to determine results (for example math for sizing and structure). Compression has the ability to define functions in PHP and have them process within the CSS!

For example, say we have many classes, all for different column sizes. We can define a base function in PHP to do the math and output a size in pixels.

function colWidth() {
	$args = func_get_args(); 
	$width = $args[0] * 100;
	return $width .'px';
}

Once we have defined our function, we can write the function in the CSS and pass it some arguments. In the next example you can see the before and after.

.col1 { width: colWidth(5); }
.col2 { width: colWidth(3); }
.col3 { width: colWidth(1); }
 
// After being parsed
.col1 { width: 500px; }
.col2 { width: 300px; }
.col3 { width: 100px; }

Now you have the power of procedural and functional programming within CSS and can do just about anything! (You must use func_get_args() to get the arguments passed from the CSS to the function).