@each loop over lists in SASS - Deep Dive

Overview - @each loop over lists

What is it?

The @each loop in Sass is a way to repeat a set of styles for each item in a list. It helps you write less code by automating repetitive CSS rules. Instead of writing the same style many times, you tell Sass to do it for every item in your list. This makes your stylesheets cleaner and easier to manage.

Why it matters

Without the @each loop, you would have to write repetitive CSS code manually, which is time-consuming and error-prone. The loop saves time and reduces mistakes by automating repeated styles. It also makes it easier to update styles because you only change the list, and all related styles update automatically.

Where it fits

Before learning @each loops, you should understand basic Sass syntax, variables, and lists. After mastering @each loops, you can explore nested loops, maps, and functions in Sass to create even more dynamic styles.

Mental Model

Core Idea

The @each loop runs a block of styles once for every item in a list, like giving instructions to repeat a task for each object in a group.

Think of it like...

Imagine you have a box of crayons, and you want to color a page with each crayon one by one. Instead of picking each crayon manually, you tell a robot to pick each crayon from the box and color the page. The robot is like the @each loop doing the same task for every crayon automatically.

List: [red, blue, green]

@each item in list {
  Apply styles for item
}

Result:
- Styles for red
- Styles for blue
- Styles for green

Build-Up - 6 Steps

1

Foundation

Understanding Sass Lists

Concept: Learn what lists are in Sass and how to create them.

In Sass, a list is a group of values separated by spaces or commas. For example, $colors: red, blue, green; creates a list of three colors. Lists let you store multiple values in one variable.

Result

You can store multiple items in one variable and use them later.

Knowing how lists work is essential because @each loops go through each item in these lists.

2

Foundation

Basic @each Loop Syntax

Concept: Introduce the basic structure of the @each loop in Sass.

The @each loop looks like this: @each $item in $list { // styles using $item } It repeats the styles inside the block for every item in the list.

Result

You can write one block of styles that applies to every item in a list.

Understanding the syntax lets you automate repetitive CSS rules easily.

3

Intermediate

Using @each with Color Lists

🤔Before reading on: do you think you can use @each to create different background colors for multiple classes? Commit to your answer.

Concept: Apply @each to generate CSS classes with different background colors from a list.

Example: $colors: red, blue, green; @each $color in $colors { .bg-#{$color} { background-color: $color; } } This creates .bg-red, .bg-blue, and .bg-green classes with matching backgrounds.

Result

CSS classes with different background colors are generated automatically.

Using @each with lists lets you create multiple related styles quickly and consistently.

4

Intermediate

Looping Over Lists with Multiple Variables

🤔Before reading on: can you guess how to loop over a list of pairs, like color and size, using @each? Commit to your answer.

Concept: Learn to unpack multiple values from a list of lists inside an @each loop.

You can loop over a list of lists like this: $sizes: (small, 12px), (medium, 16px), (large, 20px); @each $name, $size in $sizes { .text-#{$name} { font-size: $size; } } This creates classes with different font sizes.

Result

Multiple variables can be extracted from each list item to create complex styles.

Knowing how to unpack values expands the power of @each for more detailed styling.

5

Advanced

Combining @each with Nested Selectors

🤔Before reading on: do you think @each can be used inside nested selectors to create complex CSS? Commit to your answer.

Concept: Use @each inside nested selectors to generate styles for child elements dynamically.

Example: $states: normal, hover, active; .button { @each $state in $states { &:#{$state} { color: if($state == hover, blue, black); } } } This creates .button:hover and .button:active styles.

Result

You get dynamic pseudo-class styles generated from a list.

Combining @each with nesting helps write DRY and scalable CSS for interactive states.

6

Expert

Performance and Limitations of @each Loops

🤔Before reading on: do you think using very large lists in @each loops can affect CSS file size or browser performance? Commit to your answer.

Concept: Understand how large or complex @each loops impact compiled CSS and maintainability.

While @each loops save coding time, very large lists generate big CSS files, which can slow down page loading. Also, deeply nested loops can make debugging harder. Use loops wisely and consider alternatives like CSS custom properties or utility frameworks for very large style sets.

Result

Knowing when to use or avoid @each loops helps balance automation and performance.

Understanding the tradeoffs prevents overusing loops and keeps stylesheets efficient and maintainable.

Under the Hood

When Sass compiles your code, it reads the @each loop and repeats the block inside it for every item in the list. It replaces the loop variable with the current item each time. This happens during compilation, so the browser only sees the final CSS without loops.

Why designed this way?

Sass was designed to make CSS easier to write and maintain. The @each loop was created to automate repetitive tasks in stylesheets, reducing human error and saving time. It compiles to plain CSS because browsers do not understand Sass syntax.

Sass source code with @each loop
        │
        ▼
Compiler reads list and loop
        │
        ▼
Repeats styles for each item
        │
        ▼
Generates plain CSS without loops
        │
        ▼
Browser renders final styles

Myth Busters - 4 Common Misconceptions

Quick: Does @each loop run in the browser or during Sass compilation? Commit to your answer.

Common Belief: Some think @each loops run in the browser like JavaScript loops.

Reality: @each loops run only during Sass compilation, producing static CSS output.

Why it matters: Believing loops run in the browser leads to confusion about dynamic styling and performance.

Quick: Can you modify the original list inside an @each loop? Commit to your answer.

Common Belief: People often believe you can change the list items inside the loop.

Reality: Lists are immutable during the loop; you cannot change the original list inside @each.

Why it matters: Trying to modify lists inside loops causes errors or unexpected results.

Quick: Does @each loop automatically create CSS classes if you forget to write selectors? Commit to your answer.

Common Belief: Some think @each automatically generates CSS selectors for list items.

Reality: You must write selectors explicitly; @each only repeats the block with variables replaced.

Why it matters: Assuming automatic selector creation leads to missing styles and confusion.

Quick: Can you use @each to loop over maps directly like lists? Commit to your answer.

Common Belief: Many believe @each works the same for maps and lists without difference.

Reality: @each can loop over maps but requires different syntax to unpack keys and values.

Why it matters: Misusing @each with maps causes syntax errors and bugs.

Expert Zone

1

When looping over lists of lists, the number of variables in @each must match the number of items in each sublist exactly, or it causes errors.

2

Using interpolation inside selectors with @each allows dynamic class names but can lead to invalid CSS if not carefully formatted.

3

@each loops do not preserve order if the list is a map converted to a list; understanding this helps avoid unexpected style order.

When NOT to use

Avoid using @each loops for very large lists or deeply nested loops that generate huge CSS files. Instead, consider CSS custom properties, utility-first CSS frameworks, or JavaScript-driven styling for dynamic or large-scale style changes.

Production Patterns

In real projects, @each loops are used to generate theme color classes, responsive utility classes, or state-based styles efficiently. They often combine with variables and functions to create scalable, maintainable design systems.

Connections

JavaScript for loops

Similar pattern of repeating actions for each item in a list.

Understanding how loops work in JavaScript helps grasp the concept of repeating styles in Sass with @each.

Database batch processing

Both process multiple items one by one automatically.

Knowing batch processing in databases clarifies how @each automates repetitive tasks efficiently.

Assembly line manufacturing

Both involve repeating a process for each item in a sequence.

Seeing @each as an assembly line helps understand how automation reduces manual work and errors.

Common Pitfalls

#1 Forgetting to use interpolation in selectors inside @each loops.

Wrong approach:

@each $color in $colors {
.bg-$color {
background-color: $color;
}
}

Correct approach:

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

Root cause:

Not knowing that Sass requires interpolation (#{$var}) to insert variables into selectors.

#2 Trying to modify the list variable inside the @each loop.

Wrong approach:

@each $color in $colors {
$colors: append($colors, yellow);
.bg-#{$color} {
background-color: $color;
}
}

Correct approach:

// Define list once outside loop
$colors: red, blue, green;
@each $color in $colors {
.bg-#{$color} {
background-color: $color;
}
}

Root cause:

Misunderstanding that Sass variables are immutable inside loops.

#3 Using @each loop without a list variable, causing syntax errors.

Wrong approach:

@each $item in red, blue, green {
.color-#{$item} {
color: $item;
}
}

Correct approach:

$colors: red, blue, green;
@each $item in $colors {
.color-#{$item} {
color: $item;
}
}

Root cause:

Not assigning the list to a variable before looping.

Key Takeaways

The @each loop in Sass automates repeating styles for every item in a list, saving time and reducing errors.

Lists are essential to use with @each loops because they hold the items you want to loop over.

Interpolation (#{$variable}) is required to insert variables into selectors inside @each loops.

@each loops run during Sass compilation, producing static CSS that browsers understand.

Using @each loops wisely prevents bloated CSS and keeps stylesheets maintainable and efficient.