Sass - @for through Keyword

Quiz

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.

sass_control_directives_expressions.htm

Print Page