- 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
Rule Inheritance
By using the @extend
directive and passing it a named ruleset or selector from any other rule you can share styles
more effectively across a stylesheet.
Abstract rules can be used if you just need to extend a generic set of declarations.
.negative-text {
overflow: hidden;
text-indent: -9999px;
}
.sidebar-headline {
@extend .negative-text;
background: url( headline.png ) no-repeat;
}
Renders as
.negative-text,
.sidebar-headline {
overflow: hidden;
text-indent: -9999px;
}
.sidebar-headline {
background: url( headline.png ) no-repeat;
}
Referencing by name
If you want to reference a rule without being concerned about later changes to the identifying selector use the @name
directive:
.renamedClass {
@name baseClass;
text-decoration: underline;
}
.myClass {
@extend baseClass;
}
Extending with pseudo classes/elements
@extend arguments can adopt pseudo classes/elements by appending an exclamation mark:
.link-base {
color: #bada55;
text-decoration: underline;
}
.link-base:hover,
.link-base:focus {
text-decoration: none;
}
.link-footer {
@extend .link-base, .link-base:hover!, .link-base:focus!;
color: blue;
}
Renderd as
.link-base,
.link-footer {
color: #bada55;
text-decoration: underline;
}
.link-base:hover,
.link-base:focus,
.link-footer:hover,
.link-footer:focus {
text-decoration: none;
}
.link-footer {
color: blue;
}