Variables

The variables extension is based on the spec proposed by Nicole Sullivan for CSS variables. It allows you to set variables within a variables block and use them throughout the CSS.

Usage

Define variables using an @variables block:

@variables colors
{
    light:#eee;
    dark:#333;
}

Then you use them in your CSS using this syntax:

#id
{
    background:colors.light;
    text:colors.dark;
}

The second word in the @variables block declaration is the variable group. This is the prefix used when calling the variable. If no variable group is specified, the variables can be accessed in the var group.

@variables
{
    text_color:#555;
}

body 
{
    color:var.text_color;
}

Variables can contain any type of content and can be used anywhere in the CSS.

@variables {
  reset:0;
  blockElements: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td;
}
 
var.blockElements
{
	color:color.base;
	margin:var.reset;
}

Settings

variables

This option lets you define variables in the PHP configuration file. You might want to use some math or use PHP environment variables within the CSS so you can define them here.

Example:

<?php
$config['Variables']['variables'] = array(
    'get' => $_GET,
    'my_group' => array(
        'key' => 'value'
    )
);

#id
{
    height:get.height;
}

In this case, if there is a $_GET key of height it will be used in the CSS.

 http://mysite.com/parse.php?file=/styles/master.css&height=20px

#id
{
    height:20px;
}

Hooks

variables_replace($source,Scaffold_Extension_Variables $obj)

Fires just before the variables are replaced in the CSS and the variables from the CSS and the config have already been found.