SASS @for Rule - How to Use This SCSS Directive?

1. What is SASS @for Rule?

The @for rule is among the SASS flow control directive family. The SCSS @for rule or directive handles the iteration of a code block, a specific number of times, and we can also name it as a loop like in PHP programming language. In addition, this directive counts up or down from a given value to a terminating value which is specified known as SCSS expression. While compilation, each number between the upper and lower limit of the variable is assigned to the variable one by one for each repetition. Further, the code block or SASS style rules in the curly braces are repeated for each value individually.

1.1. Syntax of SCSS @for Rule

We can put to use the @for control directive in our SASS stylesheets by employing the following syntax. There are two syntax variations for the @for rule with very little difference.

@for <variable> from <expression> to <expression> { ... }
or
@for <variable> from <expression> through <expression> { ... }

1.2. SCSS @for Rule Syntax Explained

• The syntax of the @for directive has seven components.
• First of all, we write the SASS @for directive keyword itself.
• Further, we write a variable whose value we want to utilize for resolving code block.
• Next, we add the keyword from in the syntax row.
• Then we write the upper/lower limit or value for the variable specified earlier known as expression.
• Now is the time to add the keyword to or through in the syntax.
• We only apply any of these two keywords and thus, these keywords create two variants of the syntax.
• Further, we include the lower/upper limit or value for the variable specified before.
• Lastly, we enclose the code block or style rules within the curly braces that we want to resolve for each value of the variable.

2. Usage of SCSS @for Directive

Let us discern the usage of the @for directive in our SCSS code by using the two variants.

2.1. Difference Between @for Variants

There is only a small difference in the usage of the to and through keyword while writing the @for rule in our SASS stylesheets.

1. Using to Keyword: If we utilize the to keyword, the final value of the limit is excluded from iteration.
2. Using through Keyword: If we use the through keyword, the @for rule makes use of the terminating value of the limit also.

Type 1

The below example explores the utilization of the @for SCSS rule utilizing the to keyword. Navigate the adjacent tab to witness the total iterations of the to keyword.

$color: #2a73cc;
@for $i from 1 to 3 {
	table tr td:nth-child(3n+#{$i}) {
		background: lighten($color, $i*15%);
	}
}

table tr td:nth-child(3n+1) {
	background: #649bdf;
}
table tr td:nth-child(3n+2) {
	background: #a3c4ec;
}

Type 2

The following instance explicates the usage of the @for SCSS rule by employing through keyword. Jump to the adjoining CSS code tab to check how many times the through keyword resolved the code block.

$list-color: #2a73cc;
@for $i from 1 through 3 {
	ul li:nth-child(3n+#{$i}) {
		background: darken($list-color, $i*15%);
	}
	ul li:nth-child(3n+#{$i}) a{
		color: lighten($list-color, $i*15%);
	}
}

ul li:nth-child(3n+1) {
	background: #1d4f8d;
}
ul li:nth-child(3n+1) a {
	color: #649bdf;
}

ul li:nth-child(3n+2) {
	background: #102b4d;
}
ul li:nth-child(3n+2) a {
	color: #a3c4ec;
}

ul li:nth-child(3n+3) {
	background: #03080e;
}
ul li:nth-child(3n+3) a {
	color: #e2edf9;
}