- Creating Powerful Mixins 4:30
- Smarter Mixins with null and Keyword Arguments 8:17
- Advanced Mixins Challenge 4 objectives
- Add Conditional Logic to Your Stylesheets 8:11
- Storing Values in Maps 7:37
- Write Loops with @for 6:24
- Loop Through Lists with @each 4:25
- Loop Through Data in a Map with @each 6:18
- Maps and Loops Review 5 questions
- Handling Errors with @error and @warn 3:51
- Debugging Sass with Sourcemaps 3:08
- Debugging Review 5 questions
Preview
Video Player
00:00
00:00
Write Loops with @for
6:24Loops 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.
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