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);
}
}