Control Directives

In this lesson, we'll be looking at SASS control directives, which allow us to introduce conditionals and looping into our stylesheets.

We'll cover the following

Definition #

Control directives and expressions are used in SASS to include styles only under certain defined conditions.

As a feature, they’re quite advanced and are mainly useful in mixins. Common directives include @if, @else, @for and @while.

@if and @else #

The @if and @else directives are similar to if and else statements in JavaScript.

@if takes an expression and executes the styles contained within its block — if the evaluation is not false (or null).

@else will then be checked, if the previous @if evaluated to false.

For example:

Get hands-on with 1400+ tech skills courses.