- Sass Tutorial
- Sass - Home
- Sass - Overview
- Sass - Installation
- Sass - Syntax
- Using Sass
- Sass - CSS Extensions
- Sass - Comments
- Sass - Script
- Sass - @-Rules and Directives
- Control Directives & Expressions
- Sass - Mixin Directives
- Sass - Function Directives
- Sass - Output Style
- Extending Sass
- Sass Useful Resources
- Sass - Interview Questions
- Sass - Quick Guide
- Sass - Useful Resources
- Sass - Discussion
Sass - @for through Keyword
Description
The @for directive uses the keyword through which specifies the range including both the values of <start> and <end>.
Syntax
@for $var from <start> through <end>
The syntax is briefly explained below −
$var − It represents the name of the variable like $i.
<start> and <end> − These are SassScript expressions, which will return integers. If the <start> is greater than <end> then the counter variable is decremented and when <start> is lesser than <end> the counter variable will be incremented.
Example
The following example demonstrates the use of @for directive with through keyword −
<html> <head> <title>Control Directives & Expressions</title> <link rel = "stylesheet" type = "text/css" href = "style.css"/> </head> <body> <p class = "p1">This is first line.</p> <p class = "p2">This is second line.</p> <p class = "p3">This is third line.</p> <p class = "p4">This is fourth line.</p> </body> </html>
Next, create file style.scss.
style.scss
@for $i from 1 through 4 { .p#{$i} { padding-left : $i * 10px; } }
You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −
sass --watch C:\ruby\lib\sass\style.scss:style.css
Next, execute the above command; it will create the style.css file automatically with the following code −
style.css
.p1 { padding-left: 10px; } .p2 { padding-left: 20px; } .p3 { padding-left: 30px; } .p4 { padding-left: 40px; }
Output
Let us carry out the following steps to see how the above given code works −
Save the above given html code in @for_through.html file.
Open this HTML file in a browser, an output is displayed as shown below.