Trending October 2023 # How @For Directive Works In Sass With Examples # Suggested November 2023 # Top 12 Popular

You are reading the article How @For Directive Works In Sass With Examples updated in October 2023 on the website Nhunghuounewzealand.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 How @For Directive Works In Sass With Examples

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

The syntax for @for directive in SASS can be written as shown below:

The syntax can be explained as:

$var: It signifies the name of the variable like $m, $a or $i.

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 chúng tôi with the below code:

Example #1

Code:

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.css

Now, 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.

Example #2

We can also use variables to handle @for directive. Now create an HTML file called chúng tôi with the below code:

Code:

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

Code:

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.