Angular2 + SASS
Themes
What we'll see?
- Requirements
- SASS - Variables
- CSS4 Variables
- Our Solution
- Advantages
- Tips & Tricks
Requirements
- Preserve current functionality
- Dynamic switching of themes
- Theme - set of CSS rules
- View Encapsulation
- Simplicity (Ease of use)
SASS Variables
Works well? Problems?
CSS4 Variables
:host-context
apply styles based on some condition outside a component's view.
:host-context(.theme-light) h2 {
background-color: #eef;
}SASS Nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
}nav ul {
margin: 0;
padding: 0;
list-style: none;
}The Solution!
How it works - show code
Advantages
- Easy to implement
- Future-Proof (CSS4)
- No redundant classes
- AngularJS2-Way
- Auto Completion
Tips & Tricks
- Test your test - change the class
- How to target the host element?