SASS Terniary Expressions

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store