SCSS @each explained

SCSS @each Detailed Explanation

In SCSS, the @each directive is used to loop over a list or map and perform the same operation on each element. It can help us reduce duplicate code and improve the maintainability and readability of style sheets. This article will introduce the usage of the @each directive and its examples in detail.

Basic syntax of @each

The basic syntax of the @each directive is as follows:

@each $variable in <list or map> {
// styles to apply 
} 

• $variable: Used to represent each element in the loop.
• <list or map>: The list or map to be iterated.

@each Iterates Over a List

First, let’s look at a simple example using the @each directive to iterate over a list of colors and generate the corresponding style for each color.

$colors: red, green, blue; 

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

In the example above, we define a list of three colors, $colors, and then use the @each directive to iterate over the list and generate a corresponding class name and background color style for each color. The compiled CSS code is as follows:

.color-red {
background-color: red;
}

.color-green {
background-color: green;
}

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

@each Iterates Over Maps

In addition to lists, the @each directive can also be used to iterate over maps. Let’s look at an example that uses the @each directive to iterate over a map and generate styles for different font sizes.

$font-sizes: (
small: 0.8rem,
medium: 1rem,
large: 1.2rem
); 

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

In the example above, we define a map $font-sizes containing different font sizes, then use the @each directive to iterate over this map and generate a corresponding class name and style for each font size. The compiled CSS code is as follows:

.font-small {
font-size: 0.8rem;
}

.font-medium {
font-size: 1rem;
}

.font-large {
font-size: 1.2rem;
}

@each Nested Iteration

The @each directive also supports nested iteration, allowing you to nest an @each block within another @each block. The following example demonstrates how to nest @each to iterate over two lists and generate styles for the combined class names.

$background-colors: red, green, blue; 
$text-colors: white, black; 

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

In the example above, we define two color lists, $background-colors and $text-colors, and then use nested @each to iterate over these two lists, generating a style for each background color and text color combined with a class name. The compiled CSS code is as follows:

.btn-red-white { 
background-color: red; 
color: white; 
}

.btn-red-black {
background-color: red;
color: black; 
}

.btn-green-white {
background-color: green;
color: white; 
}

.btn-green-black {
background-color: green;
color: black; 
}

.btn-blue-white {
background-color: blue;
color: white; 
}

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

Summary

Through this article, we’ve learned the basic syntax and usage of the @each directive in SCSS. It can help us iterate over lists and maps, reduce duplicate code, and improve stylesheet maintainability.