Tutorials

Sass Flow Control

Sass Introduction

Sass @each

Posted in Sass Tutorial

Updated on Sep 29, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @each directive in Sass is a powerful tool for iterating over lists and maps, allowing you to apply styles or perform operations based on each item.

It simplifies the process of generating repetitive CSS rules and helps in managing complex styling logic efficiently.

💡 Syntax

The syntax for the @each directive allows you to loop through a list or map and execute a block of code for each item.

Iterating Over a List

Syntax

Copied

@each $item in $list {
  // Styles or operations using $item
}

Iterating Over a Map

Syntax

Copied

@each $key, $value in $map {
  // Styles or operations using $key and $value
}

🔢 Parameters

$list: The list of items you want to loop through.
$map: The map of key-value pairs you want to loop through.
$key: The key in the map (used when iterating over maps).
$value: The value in the map (used when iterating over maps).

↩️ Return Value

The @each directive does not return a value. Instead, it executes a block of code for each item in the list or map.

📝 Example Usage

Here are some examples demonstrating how to use the @each directive in Sass.

📜 Example 1: Iterating Over a List

example.scss

Copied

$colors: red, green, blue;

.button {
  @each $color in $colors {
    &.#{$color} {
      background-color: $color;
    }
  }
}

In this example, a class is created for each color in the $colors list, setting the background color accordingly.

📜 Example 2: Iterating Over a Map

example.scss

Copied

$sizes: (
  small: 12px,
  medium: 16px,
  large: 20px
);

.text {
  @each $key, $value in $sizes {
    &-#{$key} {
      font-size: $value;
    }
  }
}

Here, classes are generated for each size defined in the $sizes map, with the font size set according to the value.

📜 Example 3: Dynamic Class Names

example.scss

Copied

$themes: (
  light: #fff,
  dark: #333
);

@each $theme, $color in $themes {
  .theme-#{$theme} {
    background-color: $color;
    color: $theme == light ? #000 : #fff;
  }
}

This example creates theme classes with dynamic background and text colors based on the $themes map.

⚠️ Common Pitfalls

Incorrect Use of @each with Non-Iterable Values:

Ensure that the value passed to @each is either a list or a map. Using other types of values will result in an error.

The following is Incorrect:
example.scss
Copied
```
@each $item in 'string' {
  // This will not work
}
```
The following is Correct:
example.scss
Copied
```
$list: red, green, blue;
@each $item in $list {
  // This works
}
```

Overwriting Variables Inside the Loop:

Be cautious when using the same variable names inside nested @each loops or other loops. It might lead to unexpected results or errors.

example.scss

Copied

$colors: red, green, blue;

@each $color in $colors {
  $color: lighten($color, 20%);
  // $color is overwritten here
}

Solution:

example.scss

Copied

$colors: red, green, blue;

@each $color in $colors {
  $light-color: lighten($color, 20%);
  // Use $light-color instead of overwriting $color
}

Forgetting to Include & for Nested Selectors:

When using @each within nested selectors, remember to include & to ensure proper nesting of the generated styles.

The following is Incorrect:
example.scss
Copied
```
.container {
  @each $size in $sizes {
    .size-#{$size} {
      width: $size;
    }
  }
}
```
The following is Correct:
example.scss
Copied
```
.container {
  @each $size in $sizes {
    &.size-#{$size} {
      width: $size;
    }
  }
}
```

🎉 Conclusion

The @each directive in Sass provides a powerful way to handle repetitive styling tasks efficiently. By allowing you to iterate over lists and maps, @each simplifies the process of generating CSS rules and enhances the maintainability of your code. Understanding and applying this directive effectively can greatly streamline your styling workflow.

Experiment with @each in different scenarios to leverage its full potential and make your Sass code more dynamic and manageable.