Loops appear in most programming languages.

They provide a way to repeat a set of actions over and over again.

Loops simplify repetitive tasks by cycling through lists of items or values and

performing an action on each.

For example, outputting a selector for each author and a list of author names, or

creating different sets of button styles from a map of color names and values.

Once again, we'll briefly step away from our

blog project to experiment with loops in a separate workspace.

Be sure to fork the snapshot of this workspace and

run the Sass watch command in the console to follow along.

I posted the link to the snapshot in the teachers notes.

So, there are three types of loops in sass.

The for loop, each loop and while loop.

I'm not going to cover the while loop in this close, but

I have posted resources about it in the teachers notes.

Developers commonly use for loops to repeat a block of styles,

a certain number of times and each loops to iterate over collections like maps and

lists and perform an action on each item.

So for example, say you had to create ten class selectors.

Each selector styles a box on the page and applies a different background color.

Well, you could manually write each selector in CSS

to style the background over and over again until you've written ten rules.

Well, all that typing seems like a lot of work.

Imagine, you wanted to apply different background to 20 or 100 boxes on the page,

that would be a lot of code.

So for loops provide an easier way to make this happen.

In the file style.scss of our new workspace, let's use a for

loop to output ten class selectors.

You define a for loop using the for directive followed by an index variable.

This variable adjusts the output for each iteration in the loop.

Developers commonly name this variable i for index.

For loops use the from keyword to repeat an action like output a selector

in a CSS rule a given number of times from a start index to an end index.

So for example, the expression from one through 10,

starts at one, loops through each iteration, and ends at 10.

So watch what happens when I write a CSS rule inside this for loop.

Let's target the class box, and set the background color to tomato.

When we save the file and have a look at the output,

notice how Sass outputs ten box rules that set the background color to tomato red.

Now, ten copies of the same rule isn't very useful but

using a loop you can dynamically output a different class selector and

background color per iteration.

For example box-1, box-2, box-3 and so on.

The for directive sets the value of i

to each number in the specified range from one through ten in this case.

So, let's add a dash after our box class and next we'll need to use what's called

interpolation to insert each value of i into the selector.

Interpolation syntax consists of a hash symbol followed by a set of curly braces

and inside the curly braces, you write be very well you want to interpolate or

insert, which is going to be i.

Saving this changes output ten CSS rules using this selector box-1,

box-2 all the way through box-10.

As you can see,

the interpolation syntax output each value of i as part of the selector.

Now, let's set each box to a different background color.

So for this example, I'll use Sass' adjust hue function to change

the hue of the color tomato on each iteration.

The adjust hue function requires a degree value that adjusts the hue of the color by

rotating it along the color wheel.

So for example, the value tomato,20 rotates tomato by 20 degrees.

So we can dynamically change the rotation on each iteration

using the loop's i variable.

Since i takes on each value in the sequence, from 1 through 10.

In this case, let's multiply each value of i by 20 degrees.

So after the comma we'll type the i variable

called by the multiplication operator.

I'll give the file a save and nice.

Our loop outputs a different background color for each selector

If you need more box selectors, simply change the end value.

So, let's make it 20.

And now we have 20 box rules, each with a different background color.

Now going back and changing the start value to say,10

creates a set of selectors starting from box 10 through box 20, neat.

When creating a for loop, the keyword through includes the start and

end values of the specified range.

So here, for example, our loop is telling Sass,

go from 1 all the way through 10, and stop.

Well, you also have the option of using the to keyword in a for loop.

To begins at the start value and

loops over each value in the sequence except for the end value.

And when it gets to the end value it stops the looping process.

So now, we're telling Sass to loop from 1 to 10 and when you get to ten stop.

Since it doesn't iterate that one last time,

Sass does not include the end value in the CSS output.

So now we're outputting the selectors box 1 to box 9.

Most of the time I'm going to use through

to iterate from the start through the N value.

I just wanted you to be aware of the two key words just in case you come across it

in a project.

For loops are also useful when generating numbered selectors with the nth

child pseudo class or in generating column classes for grid systems.

In the teachers notes, I posted a link to a Treehouse video that teaches you how to

auto generate column classes for a responsive grid using a forward loop.