Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Sass Basics!
You have completed Sass Basics!
Preview
Loops simplify repetitive tasks by cycling through lists of items or values and performing an action on each. Developers commonly use for-loops to repeat a block of styles a certain number of times. In this video, we'll create a for-loop that outputs a set of selectors based on a start and end value.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Loops appear in most
programming languages.
0:00
They provide a way to repeat a set
of actions over and over again.
0:03
Loops simplify repetitive tasks by cycling
through lists of items or values and
0:06
performing an action on each.
0:11
For example, outputting a selector for
each author and a list of author names, or
0:13
creating different sets of button styles
from a map of color names and values.
0:17
Once again,
we'll briefly step away from our
0:21
blog project to experiment with
loops in a separate workspace.
0:24
Be sure to fork the snapshot
of this workspace and
0:27
run the Sass watch command in
the console to follow along.
0:30
I posted the link to the snapshot
in the teachers notes.
0:33
So, there are three
types of loops in sass.
0:36
The for loop, each loop and while loop.
0:38
I'm not going to cover the while
loop in this close, but
0:41
I have posted resources about
it in the teachers notes.
0:44
Developers commonly use for
loops to repeat a block of styles,
0:46
a certain number of times and each loops
to iterate over collections like maps and
0:50
lists and perform an action on each item.
0:54
So for example,
say you had to create ten class selectors.
0:58
Each selector styles a box on the page and
applies a different background color.
1:01
Well, you could manually
write each selector in CSS
1:05
to style the background over and
over again until you've written ten rules.
1:08
Well, all that typing
seems like a lot of work.
1:12
Imagine, you wanted to apply different
background to 20 or 100 boxes on the page,
1:14
that would be a lot of code.
1:18
So for loops provide an easier
way to make this happen.
1:21
In the file style.scss of our
new workspace, let's use a for
1:25
loop to output ten class selectors.
1:29
You define a for loop using the for
directive followed by an index variable.
1:31
This variable adjusts the output for
each iteration in the loop.
1:37
Developers commonly name
this variable i for index.
1:41
For loops use the from keyword to
repeat an action like output a selector
1:45
in a CSS rule a given number of times
from a start index to an end index.
1:50
So for example,
the expression from one through 10,
1:56
starts at one, loops through
each iteration, and ends at 10.
2:00
So watch what happens when I write
a CSS rule inside this for loop.
2:04
Let's target the class box, and
set the background color to tomato.
2:10
When we save the file and
have a look at the output,
2:19
notice how Sass outputs ten box rules that
set the background color to tomato red.
2:23
Now, ten copies of the same
rule isn't very useful but
2:29
using a loop you can dynamically
output a different class selector and
2:33
background color per iteration.
2:36
For example box-1, box-2, box-3 and so on.
2:38
The for directive sets the value of i
2:43
to each number in the specified range
from one through ten in this case.
2:47
So, let's add a dash after our box class
and next we'll need to use what's called
2:51
interpolation to insert each
value of i into the selector.
2:57
Interpolation syntax consists of a hash
symbol followed by a set of curly braces
3:04
and inside the curly braces, you write
be very well you want to interpolate or
3:09
insert, which is going to be i.
3:15
Saving this changes output ten CSS
rules using this selector box-1,
3:17
box-2 all the way through box-10.
3:23
As you can see,
3:27
the interpolation syntax output each
value of i as part of the selector.
3:28
Now, let's set each box to
a different background color.
3:36
So for this example, I'll use Sass'
adjust hue function to change
3:40
the hue of the color
tomato on each iteration.
3:45
The adjust hue function requires a degree
value that adjusts the hue of the color by
3:53
rotating it along the color wheel.
3:58
So for example, the value tomato,20
rotates tomato by 20 degrees.
4:01
So we can dynamically change
the rotation on each iteration
4:06
using the loop's i variable.
4:10
Since i takes on each value in
the sequence, from 1 through 10.
4:13
In this case, let's multiply
each value of i by 20 degrees.
4:17
So after the comma we'll
type the i variable
4:22
called by the multiplication operator.
4:25
I'll give the file a save and nice.
4:27
Our loop outputs a different
background color for each selector
4:31
If you need more box selectors,
simply change the end value.
4:41
So, let's make it 20.
4:45
And now we have 20 box rules,
each with a different background color.
4:49
Now going back and
changing the start value to say,10
4:57
creates a set of selectors starting
from box 10 through box 20, neat.
5:02
When creating a for loop,
the keyword through includes the start and
5:11
end values of the specified range.
5:16
So here, for example,
our loop is telling Sass,
5:19
go from 1 all the way through 10,
and stop.
5:22
Well, you also have the option of
using the to keyword in a for loop.
5:27
To begins at the start value and
5:32
loops over each value in the sequence
except for the end value.
5:35
And when it gets to the end value
it stops the looping process.
5:38
So now, we're telling Sass to loop from
1 to 10 and when you get to ten stop.
5:42
Since it doesn't iterate
that one last time,
5:48
Sass does not include the end
value in the CSS output.
5:51
So now we're outputting
the selectors box 1 to box 9.
5:54
Most of the time I'm going to use through
5:58
to iterate from the start
through the N value.
6:01
I just wanted you to be aware of the two
key words just in case you come across it
6:03
in a project.
6:06
For loops are also useful when generating
numbered selectors with the nth
6:07
child pseudo class or in generating
column classes for grid systems.
6:12
In the teachers notes, I posted a link to
a Treehouse video that teaches you how to
6:16
auto generate column classes for
a responsive grid using a forward loop.
6:20
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up