- Sass Tutorial
- Sass - Home
- Sass - Overview
- Sass - Installation
- Sass - Syntax
- Using Sass
- Sass - CSS Extensions
- Sass - Comments
- Sass - Script
- Sass - @-Rules and Directives
- Control Directives & Expressions
- Sass - Mixin Directives
- Sass - Function Directives
- Sass - Output Style
- Extending Sass
- Sass Useful Resources
- Sass - Interview Questions
- Sass - Quick Guide
- Sass - Useful Resources
- Sass - Discussion
Sass - Control Directives & Expressions
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. |