
Scenario
Within our app
component we wish to add a onValid
CSS class whenever the _valid
property on the component is true.
Approach
Within styles.css
create the onValid
CSS class.
.onValid {
color: aqua;
}
Decorate a isValid()
getter
with @HostBinding
that will add the onValid
CSS class
to the component whenever the _valid
property is true.
@HostBinding('class.onValid')
get isValid() {
return this._valid;
}private _valid = true;
Demo

Scenario
When a link
is adjacent to another link
we want to give it a left margin of 2rem
.
Approach
Use the adjacent ( +
) selector.
a + a {
margin-left: 2rem;
}
Demo

Scenario
We want to use a ternary expression in SASS.
This would allow us to for example initialize a default variable when a value is not defined liked this (Taken from the Angular define-palette
) .
warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
Approach
The evaluation of the below expression will set $result to $foreground
.
$property: 'text';$result: if($property == 'text', '$foreground', '$background');@debug $result;
Angular Material Theming also uses it like this:
// We cast the $hue to a string, because some hues starting with a number, like `700-contrast`,// might be inferred as numbers by Sass. Casting them to string fixes the map lookup.$color: if(map.has-key($palette, $hue), map.get($palette, $hue), map.get($palette, $hue + ''));
Demo

Scenario
We have a CSS rule.
.name1.name2 {
color:red;
}
And we are wondering what the selector .name1.name2
selects.
Approach
It will select elements with both class names, so for this example Hello there!
will be red.
<h1 class="name1 name2">Hello there!</h1>