Sass Reference
Article

Conditions

By Hugo Giraudel

Conditional statements are one of the core features of pretty much any programming language. They make it possible to run different code blocks depending on a condition, kind of like railway track points. When applied to CSS, one might think that there are not many use cases for such logic structures. Actually, when building — even tiny — Sass mixins and functions, we soon enough realize that conditional statements are kind of a big deal.

As part of this feature, Sass provides 3 different directives:

  • @if;
  • optional @else if (that can also be written @elseif);
  • optional @else.

The first two tokens (@if and @else if) have to be directly followed by a condition. On the other hand, the @else token has to be raw.

@if $something {
    // Do something when `$something` is truthy
} @else if $something-else {
    // Do something else when `$something` is falsy
    // but `$something-else` is thruty
} @else {
    // When everything else has failed
}

Negative check

When wanting to perform a negative check, such as testing if a condition is falsy, one might be tempted to use the exclamation mark character (!) like in most languages. But Sass is not most languages, and rather provide a not keyword. This keyword works exactly as you expect it to work: it returns false is the condition is truthy, and true if the condition is falsy.

@if not $something {
    // Do something when `$something` is falsy
}

It is perfectly valid to chain two not operators in order to cast a value into a boolean, in the manner of the double bang (!!) JavaScript hack.

$boolean: not not $value;

Note that this is a rather ugly way to work around code condition and should probably be avoided when possible.

Ternary function

Most programming languages have a logical structure called a ternary operator. This conditional expression is usually used to assign or return one of two values depending on a condition. Because it is convenient to write it on a single line, it is often called inline if or iif.

Sass does have an equivalent for the ternary operator, although it is not quite an operator at this point but rather a function where the first argument is the condition, the second is the returned value if the condition is truthy, and the third and last argument is the returned result if the condition is falsy.

/// Returns whether `$value` is truthy
/// @param {*} $value - Value to test
/// @return {Bool}
@function is-truthy($value) {
    @return if($value, true, false);
}

Switch

Unfortunately — or fortunately, depending on your stance — there is no switch structure in the Sass language.

Example

In the following Sass snippet, we have a little breakpoint manager that outputs a @media context based on a breakpoint name, pulling data from a Sass map. To throw an error if the breakpoint does not exist, the mixin needs to use a conditional statement.

Basically, it uses the map-has-key function that returns a boolean to decide whether it should keep going and output the @media block or stop right now and throw an error.

/// Breakpoints map
/// @type Map
$breakpoints: (
    'small': 767px,
    'medium': 992px,
);

/// Breakpoint manager
/// @author Hugo Giraudel
/// @param {String} $breakpoint - Breakpoint name
/// @require $breakpoints
@mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        @media (min-width: map-get($breakpoints, $breakpoint)) {
            @content;
        }
    } @else {
        @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.'
    }
}

Engine compatibility

Conditional statements are fully compatible across all Sass engines and there is no known bug about their implementation.