SASS @for, @each and @while At-rule

SASS provides at-rules like @for, @each and @while for implementing loops in a stylesheet. If you want to define repetitive style rules like for HTML list etc, then we can use SASS loops.

As already clear by the title of the tutorial, there are 3 at-rules in SASS which can be used for setting up repetitive style rule creation:

1. SASS @for at-rule

2. SASS @each at-rule

3. SASS @while at-rule

Let's cover them one by one, covering syntax for them along with some examples.

SASS @for At-rule:

SASS @for at-rule works the same way like a for loop in any programming/scripting language. It is used to iterate and compile a style block with a different value each time.

SASS @for: Syntax

Following is the syntax for using the @for at-rule in SCSS/SASS:

@for <variable> from <expression> to <expression> { ... } 
/* or */ 
@for <variable> from <expression> through <expression> { ... }

As you can see in the syntax above, there are two ways of using the @for at-rule in SCSS/SASS:

1. If we specify from <exp> to <exp>, then each number starting from the result of the first expression to the result of the second expression is assigned to the variable, but the final number is excluded.

2. If we specify from <exp> through <exp>, then each number starting from the result of the first expression to the result of the second expression is assigned to the variable, but the final number is included.

SASS @for: Example

Let's take a simple example to understand how to use this. Below we have a simple HTML code with some paragraph tags.

<p class="paragraph-1">Sassy way</p>
<p class="paragraph-2">Sassy way</p>
<p class="paragraph-3">Sassy way</p>
<p class="paragraph-4">Sassy way</p>
<p class="paragraph-5">Sassy way</p>

Now if there is a need to write some styling for the almost same style classes used in the paragraph tags, then a total of 5 blocks of styles should be written.

In this case, if the for loop is used then this task requires fewer efforts. Also, in the style rules, we need to increase the font size of each paragraph by multiplying 10px with the paragraph number.

Check out the following SCSS code:

@for $i from 1 to 6 
{
  .paragraph-#{$i} 
  {
    font-size: 10px*$i;
  }
}

The above example uses start to end method so the variable $i goes from 1 to 5. If the same @for at-rule would have been written in the form of start through end, then the variable $i would take values from 1 to 6.

The generated CSS from the above SCSS code will look like:

.paragraph-1
{
   font-size: 10px;
}
.paragraph-2
{
   font-size: 20px;
}
.paragraph-3
{
   font-size: 30px;
}
.paragraph-4
{
   font-size: 40px;
}
.paragraph-5
{
   font-size: 50px;
}

SASS @each At-rule:

SCSS/SASS @each at-rule is also similar to the @for at-rule with the only difference being that it is used to iterate over the values of a list and map.

SASS @each: Syntax

Following is the syntax for using @each at-rule:

@each <variable> in <expression> { ... }

The expression returns a list and the style block is evaluated for each element of the list, which is one by one assigned to the given variable name.

SASS @each: Example

Let's understand this with the help of an example. Consider three div elements where the background color for each div needs to be set with the help of @each at-rule.

<div class="blue-background"></div>
<div class="black-background"></div>
<div class="yellow-background"></div>

First, let’s do this by using a list:

@each $color in blue, black, yellow 
{
  .#{$color}-background 
    {
       background-color: $color;
    }
}

The map way is a bit different than the list, it is as follows:

/* $colors is a map here */
$colors: (color1: blue, color2: black, color3: yellow);
@each $key, $value in $colors 
{
  .#{$color}-background 
  {
    background-color: $value;
  }
}

The compiled CSS for both the cases will look like:

.blue-background
{
  background-color: blue;
}
.black-background
{
  background-color: black;
}
.yellow-background
{
  background-color: yellow;
}

SASS @while At-rule:

SASS @while is similar to the while loop in any other programming/scripting language. It executes until the specified expression evaluates to true.

SASS @while: Syntax

Following is the syntax for @while at-rule:

@while <expression> { ... }

The style block defined with the @while at-rule is evaluated until the expression evaluates to true. We should be careful while using the @whil at-rule for looping as this can very easily lead to infinite loops.

SASS @while: Example

Let’s consider the same example that is used in @for with HTML having five paragraph tags.

<p class="paragraph-1">Sassy way</p>
<p class="paragraph-2">Sassy way</p>
<p class="paragraph-3">Sassy way</p>
<p class="paragraph-4">Sassy way</p>
<p class="paragraph-5">Sassy way</p>

Now the font size of each paragraph needs to be increased with respect to its paragraph number. This can be done using @while and it is shown below:

$x: 1;
@while $x < 6 
{
    .paragraph-#{$x} 
    {
        font-size: 10px*$x;
    }
    $x: $x + 1;
}

The generated CSS will look like this:

.paragraph-1
{
   font-size: 10px;
}
.paragraph-2
{
   font-size: 20px;
}
.paragraph-3
{
   font-size: 30px;
}
.paragraph-4
{
   font-size: 40px;
}
.paragraph-5
{
   font-size: 50px;
}

So in this tutorial, we learned 3 different looping techniques in SASS/SCSS to produce style rules iteratively. You can use these in case you have a situation where you have to define almost similar style classes with some change in style like for h1, h2, h3, etc. tags or in case of bootstrap CSS we have columns col-1, col-2, col-3, etc. There are many use-cases where these can be used.