Sass Basics: Control Directives and Expressions

Originally published at:

If you have used Sass for while or looked at the code of a framework like Foundation, you will notice a lot of advanced features used in mixins. These mixins use control directives such as @if and @for to accomplish things like setting up classes for grid systems.

Continuing with the basics of Sass we will discuss these control directives and see how you can use them in your projects. You may not ever find a need to use these control directives but its always good to know what tools are at your disposal.


This is a little different in that it is not a control directive but a built in function in Sass. Not the same as the @if directive, if() allows you to test for a condition and return one of two possible values. The condition we test for is either true or false. For example:

@mixin test($condition) {
    $color: if($condition, blue, red);

.firstClass {
    @include test(true);

.secondClass {
    @include test(false);

Continue reading this article on SitePoint

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.