SASS @each Rule - How This SCSS Directive Works?

1. What is @each Control Rule in SASS?

The @each control rule or directive assists to produce the SCSS code block or styles for every single item of the SASS list one after another. Also, the SASS @each rule can iterate equal to the number of items in a list or the number of pairs in a map. Thus, resolving the code block for every item or pair individually.

1.1. Syntax of SASS @each Control Directive

We can utilize the @each rule by following the notation in our SCSS stylesheets.

@each <variable> in <expression> { ... }

1.2. @each Syntax Explained

• The syntax of @each rule has 5 components.
• Initially, we write the directive itself at the beginning.
• Next, we exert some variable that is considered to be the single item in the list.
• Further, we write the keyword in to point the variable to the list.
• Then we include the SASS expression that returns the list of the items.
• Lastly, we employ the code block to resolve each iteration.

2. Usage of the SCSS @each Control Rule

The @each directive is among the flow control family, therefore, its only purpose is to control the iteration of the styles. Unlike the other at-rules in SASS, in which every single rule has some specific working and function, this @each directive only employs a group of items. Let us understand the usage of this @each control rule with the assistance of an SCSS program.

$widths: 680px, 980px, 1100px;
@each $width in $widths{
	@media screen and (max-width: $width){
		$x: 0;
		@if $width == 680px{
			$x : 10px;
		}
		@if $width == 980px{
			$x : 20px;
		}
		@if $width == 1100px{
			$x : 30px;
		}
		.main{
			width: $width;
			padding: $x;
			margin: $x;
		}
	}
}

@media screen and (max-width: 680px){
	.main{
		width: 680px;
		padding: 10px;
		margin: 10px;
	}
}
@media screen and (max-width: 980px){
	.main{
		width: 980px;
		padding: 20px;
		margin: 20px;
	}
}
@media screen and (max-width: 1100px){
	.main{
		width: 1100px;
		padding: 30px;
		margin: 30px;
	}
}

3. SCSS @each Control Directive With Maps

In the above instance of the @each rule, we utilized the simple SCSS list as an expression to resolve the code block. However, the @each is such a wonderful SASS control directive that it enables us to iterate the code block for maps that include the key-value pairs. Thus, we can pass on the values to the appropriate SCSS script variables in a map list.

3.1. Syntax of @each Rule For Maps

Since we have to use the @each directive to resolve a pair in an SCSS list, therefore, the syntax for maps will be slenderly different from the previously used syntax.

@each <variable>, <variable> in <expression> { ... }

3.2. @each Map Syntax Explained

• The syntax of the @each rule for maps has little variation.
• Firstly, we start with the rule itself.
• Then we write the first variable which serves as a key in the map.
• Further, we include another variable that acts as the value corresponding to that key.
• This key and value pair combine to form a list item on the map.
• Next, we add the expression that is the collection of lists or maps.
• Eventually, we exert the code block to resolve.

3.3. @each Map Example

$sizes: (680px: 10px, 980px: 20px, 1100px: 30px);
@each $width, $value in $sizes{
	@media screen and (max-width: $width){
		.wrapper{
			width: $width;
			padding: $value;
			margin: $value;
		}
	}
	.btn-#{$value}-padding{
		padding: 5px $value;
	}
}

@media screen and (max-width: 680px){
	.wrapper{
		width: 680px;
		padding: 10px;
		margin: 10px;
	}
}
.btn-10px-padding{
	padding: 5px 10px;
}
@media screen and (max-width: 980px){
	.wrapper{
		width: 980px;
		padding: 20px;
		margin: 20px;
	}
}
.btn-20px-padding{
	padding: 5px 20px;
}
@media screen and (max-width: 1100px){
	.wrapper{
		width: 1100px;
		padding: 30px;
		margin: 30px;
	}
}
.btn-30px-padding{
	padding: 5px 30px;
}

4. Destructuring Using @each Rule

The @each control directive in SASS permits us to pass a list of lists as expressions and automatically assign the list values to the variables. This is known as destructuring as the variables match the internal list's structure. The variables get allotted the value in the inner list at its corresponding position. See the following syntax to grasp the destructuring method in SCSS @each control directive.

@each <variable1>, <variable2>,... in <expression> { ... }

4.1. Usage of Destructuring Method in SASS @each Rule

Let us comprehend the destructuring technique by the below illustration .

$icons:
	"facebook" "\f09a" #1877f2,
	"instagram" "\e055" #C13584,
	"twitter" "\f099" #1da1f2;
@each $social-platform, $social-icon, $social-color in $icons{
	.icon-#{$social-platform}:before{
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		content: $social-icon;
		background: $social-color;
		color: #fff;
	}
}

.icon-facebook:before{
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	content: "\f09a";
	background: #1877f2;
	color: #fff;
}
.icon-instagram:before{
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	content: "\e055";
	background: #C13584;
	color: #fff;
}
.icon-twitter:before{
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	content: "\f099";
	background: #1da1f2;
	color: #fff;
}