Documentation and Usage

Requirements

Webserver running PHP 4 or higher. Optional requirement would be mod_rewrite (or similar) for easy parse redirection.

Syntax: Nested Rules

To create nested (grouped) rules, just nest the declarations using brackets (standard CSS syntax). CSS Server-Side Groups is designed to fit into your normal CSS seamlessly:

#header {
   font-family: sans-serif;
   color: #000;
   h2 {
      font-size: 130%;
      border: 1px solid #000;
   }
}
#footer {
   color: #f00;
}

The previous example will create the following CSS:

#header {
   font-family: sans-serif;
   color: #000;
}
#header h2 {
   font-size: 130%;
   border: 1px solid #000;
}
#footer {
   color: #f00;
}

You can nest to indefinite levels for the more complex CSS rules:

#header {
   font-family: sans-serif;
   color: #000;
   h2 {
      font-size: 130%;
      border: 1px solid #000;
      a {
         span {
            b {
               font-weight: bold;
            }
         }
      }
   }
}

The previous example will create the following CSS:

#header {
   font-family: sans-serif;
   color: #000;
}
#header h2 {
   font-size: 130%;
   border: 1px solid #000;
}
#header h2 a span b {
   font-weight: bold;
}

Syntax: Referencing Parent Rules

By default, the parent is appended to the front of the selector, delimited by a space. You can change this behavior by using the & to reference the parent. In this manner, you can easily create pseudo-attributes or top-level references:

a {
   color: #000;
   text-decoration: none;
   &:hover {
      text-decoration: underline;
   }
}
#header h2 {
   color: #000;
   .firefox & {
      color: #f00;
   }
}

The previous example will create the following CSS:

a {
   color: #000;
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
}
#header h2 {
   color: #000;
}
.firefox #header h2 {
   color: #f00;
}

Syntax: Variables

Variables are supported with the @variable{} block. Variables are interpreted as-is and can be referenced document-wide by using the $ selector.

@variables {
   base-color: #000;
   font-color: #f00;
   font: "Myriad Pro", Helvetica, sans-serif;
}

#header {
   color: $base-color;
   font: $font;
   a {
      color: $font-color;
   }
}

The previous example will create the following CSS:

#header {
   color: #000;
   font: "Myriad Pro", Helvetica, sans-serif;
}
#header a {
   color: #f00;
}

Usage: Calling

In the included example, a php script, parse.php, and an .htaccess file is used to redirect all requests for css files to parse.php. This enables you to install the script and forget about it.

To call the parser, you need to instantiate a new parser and call the parse method. The parser needs two parameters: the base directory of the file and the file name (the two will combine to create the full path to the file).

$parser = new CssGroupParser('/path/to/my/file/', 'file.css');
$parser->parse();

Usage: Customizations

You can customize how the parse will function by setting variables before calling parse():

$parser = new CssGroupParser($directory, $file);
$parser->variable_tag = '@';
$parser->variable_syntax = 'var(%s)';
$parser->optimize = TRUE;
$parser->parse();

The following is a list of the customizations you can make to the engine: