Updated April 4, 2023
Definition of SASS @for
The @for directive calculates from one number to another upwards or downwards and checks one block for each number between each one. The name of the specified variable is applied to each number along the way. The Sass @for directive makes creating a style in a loop simpler for us. It is used when a repeated set of styles is needed. For every iteration, it uses a counter variable to set the output.
The @for directive utilizes the keyword by which the range is defined for both < start > and < end > values. The through keyword will be used in the Sass @for directive to determine the range, including both the values of and. (Its class name).
Syntax:
The syntax for @for directive in SASS can be written as shown below:
@for $var from <start> through <end>The syntax can be explained as:
- $var: It signifies the name of the variable like $m, $a or $i.
- <start> and <end>: These will be SassScript expressions returning integers. If < start > is greater than < end > then counter variable value decreases and < start > is less than < end > then counter variable value increases.
How @for Directive Works in SASS?
The @for directive can be used to implement a group of statements for a specific number of times. The @for directive provide us with the flexibility to include styles only if certain requirements are met, or to loop numerous times across sections of Sass code
Examples to Implement SASS @for Directive
Let’s create an example to make use of the @for directive in SASS. Here, we have created an HTML file called example1.html with the below code:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS @for Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_for1.css"/>
</head>
<body>
<p class = "p1"> Welcome to EDUCBA... !!! </p>
<p class = "p2"> It is a leading global provider of skill based education. </p>
<p class = "p3"> It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals. </p>
<p class = "p4"> It is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain. </p>
<p class = "p5"> At eduCBA, it is a matter of pride for to make job oriented hands-on courses available to anyone, any time and anywhere. </p>
</div>
</body>
</html>Now create a file called sass_for1.scss with the below code:
sass_for1.scss
@for $m from 1 through 5 {
.p#{$m} {
padding-left : $m * 12px;
color:#27772F;
}
}Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
sass –watch sass_for1.scss: sass_for1.cssNow, execute the file with the above command and it will create the sass_for1.css file with the below code:
sass_for1.css
.p1 {
padding-left: 12px;
color: #27772F;
}
.p2 {
padding-left: 24px;
color: #27772F;
}
.p3 {
padding-left: 36px;
color: #27772F;
}
.p4 {
padding-left: 48px;
color: #27772F;
}
.p5 {
padding-left: 60px;
color: #27772F;
}Output:
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
In the above example, we can see the 12 px padding for every line at the beginning.
Example #2
We can also use variables to handle @for directive. Now create an HTML file called example2.html with the below code:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS @for Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_for2.css"/>
</head>
<body>
<p class = "txt1"> Welcome to EDUCBA... !!! </p>
<p class = "txt2"> It is a leading global provider of skill based education. </p>
<p class = "txt3"> It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals. </p>
<p class = "txt4"> It is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain. </p>
<p class = "txt5"> At eduCBA, it is a matter of pride for to make job oriented hands-on courses available to anyone, any time and anywhere. </p>
</div>
</body>
</html>Now create a file called sass_for2.scss with the below code:
sass_for2.scss
$lines: 5;
@for $i from 1 through $lines {
.txt#{$i} {
height: 8px * $lines;
}
}Execute the file with the above command as shown in the previous example and it will create the sass_for2.css file with the below code:
sass_for2.css
.txt1 {
height: 40px;
}
.txt2 {
height: 40px;
}
.txt3 {
height: 40px;
}
.txt4 {
height: 40px;
}
.txt5 {
height: 40px;
}Output
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
Example #3
Now we will set width for the content using @for directive. To implement this, create an HTML file called example3.html with the below code:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS @for Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_for3.css"/>
</head>
<body>
<p class = "p1"> Welcome to EDUCBA... !!! </p>
<p class = "p2"> It is a leading global provider of skill based education. </p>
<p class = "p3"> It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals. </p>
<p class = "p4"> It is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain. </p>
<p class = "p5"> At eduCBA, it is a matter of pride for to make job oriented hands-on courses available to anyone, any time and anywhere. </p>
</div>
</body>
</html>Now create a file called sass_for3.scss with the below code:
sass_for3.scss
@for $i from 1 to 5 {
.p#{$i} {
width: 80px * $i;
}
}Now create a file called sass_for3.css with the below code:
sass_for3.css
.p1 {
width: 80px;
}
.p2 {
width: 160px;
}
.p3 {
width: 240px;
}
.p4 {
width: 320px;
}Output:
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
Conclusion
In this article, we have seen how the @for directive can be used to organize the CSS classes within the HTML element in a simpler way. SASS uses @for directive loops which can be used to generate a lot of CSS very quickly. The @for loop is an essential directive and makes SASS a more like a real programming language.
Recommended Articles
This is a guide to SASS @for. Here we also discuss the definition and how @for directive works in sass? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
