SASS Flow Control Rules - All SCSS Flow Directives

What are Control Rules in SASS?

There are certain at-rules in SASS programming that we only exert for handling intent, known as control rules or directives. These rules support the flow of the SCSS style rules or even CSS declarations following some conditions. Furthermore, the SCSS control rules also abet in repeating specific style rules, declarations, SASS functions, or even mixins according to the flow provisions.

Following are the types of flow control rules or directives in SASS language.

1. @each Directive
2. @for Directive
3. @if And @else Directive
4. @while Directive

1. SCSS @each Control Rule

The @each control rule permits resolving a list of expressions or variables and outputs the SCSS style rules, CSS declarations, or some code block corresponding to the list item. See the below syntax to figure out this directive.

@each <some-single-variable> in <variables-list> { ... }

2. SCSS @for Control Rule

Whensoever we wish to resolve the code block for certain repetitions of variables or expressions, we employ SASS @for control directive or loop. This rule resolves the code block individually for each element of the SCSS loop until the termination conditions reach. The @for SASS control rule has two variations of syntax as below.

@for <some-variable> from <expression> to <expression> { ... }
or
@for <some-variable> from <expression> through <expression> { ... }

3. SCSS @if And @else Control Rules

3.1. SASS @if Control Rule

The @if control rule receives a SASS expression and returns true or false. After resolving the provided conditions, the @if directive evaluates the SASS style rules or CSS declarations within the curly braces. The @if directive has the following syntax.

@if some-conditions or expressions{ ... }

3.2. SASS @else Control Rule

The @else control directive is reliant on the SASS @if rule. Alone, this directive has no meaning, and occasionally we employ it with the variation as @else if to deal with further conditions. The @else rule has the below syntax.

@if some-conditions{
	// A code block
}
@else{
	// Another block of code
}

4. SCSS @while Control Rule

The @while control rule is another loop in the SASS language. This control directive iterates a code block until the given conditions return false, otherwise, it continues repeating the loop. The @while directive has the following straightforward syntax.

@while <some-expression> { ... }