sass Loops and Conditons for loop
Example
The @for directive allows you to loop through some code for a set amount of iterations and has two forms:
@for <var> from <start> through <end> {}@for <var> from <start> to <end> {}
The difference in the two forms is the through and the to; the through keyword will include the <end> in the loop where to will not; using through is the equivalent of using >= or <= in other languages, such as C++, JavaScript, or PHP.
Notes
- Both
<start>and<end>must be integers or functions that return integers. - When
<start>is greater than<end>the counter will decrement instead of increment.
SCSS Example
@for $i from 1 through 3 {
.foo-#{$i} { width: 10px * $i; }
}
// CSS output
.foo-1 { width: 10px; }
.foo-2 { width: 20px; }
.foo-3 { width: 30px; }
