@for

For loops are extremely powerful, and can be very useful. In this introduction to them, I look at a nice example of using them to create a grid system that you could use on a site, using only a few lines of SCSS to output a large amount of CSS. As we go through the different videos, I look at the basic function of a @for loop, and slowly make it better and better, adding in math and variables to really make things shine.
@for
Intro to Sass @for
2 mins
Using the $i variable
1 min
Using interpolation
2 mins
Adding in some math
2 mins
A little more math and a new variable
2 mins
@for challenge
2 mins
@for challenge.pdf
35.2 KB