- 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
Loop Through Lists with @each
4:25While @for loops are incremental and run for a particular number of repetitions, @each loops iterate through collections of data, like lists or maps, and performs an action on each item.
While for loops are incremental and run
for a particular number of repetitions.
0:00
Each loops iterate through
a collections of data like a list or
0:05
a map and performs an action on each item.
0:09
In this video I'll teach
you how to use an each loop
0:11
to automatically generate CSS rules
from a list of teacher names.
0:14
So this is what the final
demo is going to look like.
0:17
Notice, the repeating pattern here,
each selector uses the prefix teacher and
0:21
each rule uses a background image property
that points to a JPG named after a teacher
0:27
for example alena.jpg,
joel.jpg and nick.jpg.
0:32
So you're going to see how each loops
can save us from having to type
0:38
all of this code.
0:41
Sass provides a list data type
0:43
that stores a collection of related
values like strings and numbers.
0:46
List are the Sass equivalent of arrays
using programming languages like
0:49
JavaScript.
0:54
Now I'm still using the work
space from the previous video.
0:55
So in the file style.scss
let's comment out the for
0:58
loop we wrote in the previous video,
and below it create a list of teacher
1:02
names by typing a $teachers followed by
a colon a set of parens and a semicolon.
1:07
Now inside the parenthesis
you form a list using two or
1:13
more value separated by a comma.
1:18
I'll list five teacher names as strings.
1:20
But you can write as many as you'd like.
1:23
I'll start with andrew, then alena
1:25
followed by joel, daniel and nick.
1:31
So as you can see a list looks very
similar to a Sass map except it
1:42
doesn't contain keys just values.
1:47
Now let's use an each loop to
output a class selector and
1:50
background image value for
each teacher in the list.
1:54
The each loop will iterate through this
list considering each item one at a time.
1:57
You create an each loop by typing
the each directive followed by a variable
2:02
that represents the current
item in the list.
2:07
It's similar to the index or
counter variable from the previous video.
2:10
You can name this variable anything, but
it's common to give this variable a name
2:14
that represents an actual item
from the list like teacher.
2:18
Follow the variable with the keyword in,
then specify the list to iterate through.
2:24
In our case, it's teachers.
2:29
So as Sass processes this loop, teacher
is set to each item in the list and
2:35
we can output a block of styles
using the value of teacher.
2:41
So in the loop let's
create the CSS rule for
2:46
teachers by selecting the class teacher
follow it with a dash and once again
2:49
we'll use interpolation syntax to insert
a teacher's name into the selector.
2:54
We'll type pound, curly braces then
inside the curly braces write the teacher
3:00
variable So then inside the teacher
3:05
rule we'll use the background image
property to display a teachers image.
3:11
And in the URL function will use
interpolation to insert a teacher's name
3:20
into the file name.
3:25
So the path will be image/# curly braces,
and
3:26
then inside the curly braces,
write the teacher variable, and
3:30
outside the curly braces,
specify the file extension, .jpg.
3:34
When you save your changes
in the output CSS,
3:39
you'll see five teacher class selectors.
3:42
So for example, teacher-andrew,
teacher-alena, teacher-joel and so on.
3:44
And each teacher rule, displays
the background image for that teacher.
3:48
If you need to create a new teacher
selector and background image URL,
3:54
simply add the teacher name to the list,
and Sass will handle the rest.
3:58
If you're not sure when to use loops in
your code, keep an eye out for repetition.
4:05
If you have selectors and
rules that follow a similar pattern,
4:10
like our teacher selectors,
that's a good use case for a loop.
4:14
In the next video,
you'll learn more about how to use each
4:18
to help prevent writing and
duplicating code in your Sass files.
4:21