- 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
Selector Aliases
Selector aliases can be useful for grouping together common selector chains for reuse.
They're defined with the @selector
directive, and can be used anywhere you might use a pseudo class.
@selector heading :any(h1, h2, h3, h4, h5, h6);
@selector radio input[type="radio"];
@selector hocus :any(:hover, :focus);
/* Selector aliases with arguments */
@selector class-prefix :any([class^="#(0)"], [class*=" #(0)"]);
@selector col :class-prefix(-col);
.sidebar :heading {
color: honeydew;
}
:radio {
margin-right: 4px;
}
:col {
float: left;
}
p a:hocus {
text-decoration: none;
}
Renders as
.sidebar h1, .sidebar h2,
.sidebar h3, .sidebar h4,
.sidebar h5, .sidebar h6 {
color: honeydew;
}
input[type="radio"] {
margin-right: 4px;
}
[class^="col-"],
[class*=" col-"] {
border: 1px solid rgba(0,0,0,.5);
}
p a:hover,
p a:focus {
text-decoration: none;
}
Selector splatting
Selector splats are a special kind of selector alias that expand using passed arguments.
@selector-splat input input[type="#(text)"];
form :input(time, text, url, email, number) {
border: 1px solid;
}
Renders as
form input[type="time"],
form input[type="text"],
form input[type="url"],
form input[type="email"],
form input[type="number"] {
border: 1px solid;
}