Control directives and how to use them

'Control directives' sounds a bit scientific—"Hank, initiate the control directives and fire up the hydro drives". However, it's actually a lot more straightforward than that. Control directives simply mean that Sass has functionality baked-in to control when styles get generated.

Remember in Chapter 6, Advanced Media Queries with Sass and Mixins, we looked at our MQ mixin and noted it was essentially a series of if statements (if this is true do this, otherwise do something else). That is an example of a control directive in Sass; it is controlling what is generated based on certain conditions. See? Easy.

Sass has a few of these control directives so let's look at some examples. Perhaps more importantly, how we could actually make use of them. How about a way to easily switch the theme of our site?

The @if and @else if control directives

Consider this:

$color-theme: orange;

@if $color-theme == pink {
  $color-brand: pink;
} @else if $color-theme ==...