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 1200+ tech skills courses.