Sass - Control Directives & Expressions

Advertisements

Previous Page
Next Page  

In this chapter, we will study about Control Directives & Expressions. Styling based on some conditions or applying the same style many times with variations can be accomplished by using control directives and expressions, which are supported by SassScript. These control directives are advanced options used mainly in mixins. They require considerable flexibility, as they are a part of Compass libraries.

The following table lists the control directives and expressions used in SASS −

S. No. Control Directive & Expression with Description
1 if()

Based on the condition, if() function returns only one result from two possible outcomes.
2 @if

The @if directive accepts SassScript expressions and uses the nested styles whenever the result of the expression is anything other than false or null.
3 @for

The @for directive allows you to generate styles in a loop.
4 @each

In @each directive, a variable is defined which contains the value of each item in a list.
5 @while

It takes SassScript expressions and untill the statement evaluates to false it iteratively outputs nested styles.
Advertisements