Variables

Variables are a convenient way of utilising the same property repeatedly throughout your CSS and therefore changing said property is only required in one place. 

Creating a Variable

By default we assume that variables in your CSS are customisable aspects of your theme. These will include properties such as background-color, color, font, or font-size. Evance's Theme Engine passes Variables into your CSS files at runtime from the config/style.json file as appropriate to your current theme, preset and/or customisation.  

Customisable global variables

To create a Variable you must first add it into the appropriate section of your style.json file. In the following example we are declaring the main background-color for the website.

{
    "groups": [
        {
            "title": "Background",
            "properties": [
                {
                    "label": "Website background colour",
                    "id": "background_color",
                    "type": "color",
                    "value": "#fff"
                }
            ]
        }
    ]
    ...
}

Non-customisable local variables

You may also declare non-customisable Variables within a CSS file using the @set directive. However you should be aware that whilst Variables defined within the style.json file are available to all CSS files, those defined using the @set directive are only available locally to the individual file and are not customisable.

/* Defining variables */
@set {
  dark: #333;
  light: #F4F2E2;
  smaller-screen: screen and (max-width: 800px);
}

Using a Variable

Once set, using a variable is done with the $(..) directive. 

/* Using variables */
body{
    background-color: $(background_color);
}

...

@media $(smaller-screen) {
    ul, p {
        color: $(dark);
        background-color: $(accent-color);
    }
}