- Theme Engine
- Design Principles
- Templates
- EVML Reference
- Output
- Comments
- Operators
- Statements and Declarations
- Built-in Functions
- Built-in Objects
- Account
- Address
- Array
- Boolean
- Branch
- Cart
- CartLine
- Category
- CategoryCollection
- CategoryFilter
- CategoryFilterCollection
- CategoryFilterOption
- CategorySearch
- Collection
- Color
- Contact
- Currency
- Date
- Discount
- Dom
- Event
- EventCollection
- EventSlot
- Image
- Layout
- Locale
- Money
- Number
- Object
- Page
- PageCollection
- PageSearch
- PageSharer
- Pagination
- Postage
- Price
- PriceDiscount
- Product
- ProductCollection
- ProductCustomisation
- ProductDownload
- ProductMedia
- ProductMediaFrame
- ProductPrice
- ProductSearch
- ProductSpecification
- ProductSpecificationValue
- ProductVariation
- ProductVariationOption
- RecentlyViewed
- RegExp
- Request
- Review
- ReviewCollection
- Search
- SearchCollection
- SearchResult
- String
- Tag
- Template
- Url
- Website
- EV Tags
- CSS Pre-processor
- Ajax API
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);
}
}