Specification Overview
CSS Terminology
- Simple selector: Type selector, class selector (+Stylable root class)
- CSS property: Name of the rule (e.g. color)
- CSS declaration: CSS property paired with a value
- CSS declaration Block: List of CSS declarations
- CSS ruleset: CSS declaration block paired with a selector
Stylable
Syntax unique to Stylable - Click each to access code examples and descriptions
- Directive rules
-st-*
Instructions for the Stylable pre-processor, removed during transpilation-st-extends
- Extend an existing class or element-st-states
- Define custom pseudo-classes-st-mixin
- Apply mixins to CSS ruleset
- Selectors
- Import directives
@st-import
- Import external assets like mixins, stylesheets, common CSS and vars- default import - Import the file's default export value
- named import - Import the file's named export value or values
keyframes(x1, x2)
- Import named keyframe definitions from a different stylesheet
:vars {}
- Define common values to be used across the stylesheet or project- Utility directives
@st-scope .x {}
- Scope nested rules with a given selector@namespace "readable name";
- Development display name for debugging
- formatter() - Custom JavaScript functions for generating declaration values