Iteration in SASS

This article explains how to handle iteration in SASS.

We will explain how to perform iteration in SASS step by step, using actual code examples.

YouTube Video

Iteration in SASS

Iteration in SASS helps avoid code duplication and allows you to create flexible and reusable styles.

Reasons to use iteration in SASS

There are several advantages to using iteration, such as the following:.

• Reusability of code improves, making it easy to generate similar pattern styles.
• Maintainability is enhanced, making it easier to change styles at once.
• Reduces errors as well.

For example, you can generate styles for buttons with different colors or components with multiple sizes all at once.

Syntax used for iteration in SASS

The main syntax used for iteration in SASS is as follows:.

• Using @for, you can perform iteration over a specified range of numbers.
• Using @each, you can loop over lists or maps in your iteration.
• Using @while, you can loop until a certain condition is met.

Iteration using @for

@for executes repetitive processing based on a specified range of numbers.

Syntax

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/

• Specify the starting and ending values for <start> and <end>. Using to excludes the ending value, while through includes it.

Sample

The following code automatically generates classes with increasing border widths by 1px each.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}

• This code automatically generates classes for border thicknesses increasing by 1px each. The @for directive is used here to loop from 1 to 5.

Generated CSS

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}

• Classes from .border-1 to .border-5 will be generated sequentially, with each border increasing by 1px in thickness.

Iteration using @each

@each performs loops using lists or maps. It is useful when you want to efficiently generate patterned classes.

Syntax

1/*
2@each $item in <list> {
3  ...
4}
5*/

Sample 1: Using a List

The following code generates multiple text color classes.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}

• This code automatically generates text color classes for each color in the list. The @each directive is used to process each value in the list sequentially.

Generated CSS

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}

• When the SASS file is compiled to CSS, classes like .text-red, .text-blue, and .text-green are generated for each color in the list.

Sample 2: Using a Map

Using a map allows you to handle pairs of keys and values. In the following example, button background colors are defined using a map.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

Generated CSS

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}

• When the SASS file is compiled to CSS, classes such as .bg-primary, .bg-success, and .bg-danger are generated for each key in the map.

Iteration using @while

@while continues the loop as long as the condition is true.

Syntax

1/*
2@while <condition> {
3  ...
4}
5*/

Sample

For example, if you want to increment font size step by step, you can write it as follows:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}

• You can use the @while directive for iterative processing when increasing font sizes in steps. By using the variable $i, classes are automatically generated for values from 1 to 5.

Generated CSS

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}

• When the SASS file is compiled to CSS, classes with font sizes incrementing from 1rem to 5rem are generated automatically.

Advanced Example: Combining Iteration and Nesting

Combining iteration with SASS's nesting feature enables even more advanced style generation.

Sample

Below is an example in which background and hover colors for buttons are defined together.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}

• By combining iteration and SASS nesting, you can generate button background colors and hover colors all at once. For each color in the map, a .btn- class is created and the :hover style is defined using nesting.

Generated CSS

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}

• When you convert the SASS file to CSS, the background color and hover color for each button are automatically generated, and the :hover styles are collectively defined using nesting.

Points to Note When Using Iteration

Keep the following points in mind when using iteration to write more efficient and readable code.

1. Avoid excessively deep nesting Excessive nesting reduces readability, so keep it to the minimum necessary.

2. Consider performance impacts If too many classes are generated by iteration, your CSS may become unnecessarily large.

3. Use appropriate variable names For variables such as $i or $item, use meaningful names to make your code easier to understand.

Summary

Utilizing iteration in SASS enables efficient and maintainable style design. In particular, choosing between @for, @each, and @while allows you to generate dynamic and flexible CSS.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video