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.