Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 ==...