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?

Angular2 Themes

By risweb

Angular2 Themes

835

risweb