Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Flow Control

Sass @each

Posted in Sass Tutorial
Updated on Sep 29, 2024
By Mari Selvan
👁ī¸ 9 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass @each

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
Copy To Clipboard
@each $item in $list {
  // Styles or operations using $item
}

Iterating Over a Map

Syntax
Copied
Copy To Clipboard
@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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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

  1. 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
    Copy To Clipboard
    @each $item in 'string' {
      // This will not work
    }

    The following is Correct:

    example.scss
    Copied
    Copy To Clipboard
    $list: red, green, blue;
    @each $item in $list {
      // This works
    }
  2. 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
    Copy To Clipboard
    $colors: red, green, blue;
    
    @each $color in $colors {
      $color: lighten($color, 20%);
      // $color is overwritten here
    }

    Solution:

    example.scss
    Copied
    Copy To Clipboard
    $colors: red, green, blue;
    
    @each $color in $colors {
      $light-color: lighten($color, 20%);
      // Use $light-color instead of overwriting $color
    }
  3. 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
    Copy To Clipboard
    .container {
      @each $size in $sizes {
        .size-#{$size} {
          width: $size;
        }
      }
    }

    The following is Correct:

    example.scss
    Copied
    Copy To Clipboard
    .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.

👨‍đŸ’ģ Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy