- 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 Data in a Map with @each
6:18In this video, we'll revisit our VR webpage and use an @each loop to help prevent writing and duplicating the same code over and over again.
All right,
now let's go back to our VR project,
0:00
to see how we can use an each
loop to help prevent writing and
0:02
duplicating the same code over and
over again.
0:05
Our page displays six card items
consisting of different VR topics.
0:08
Like Entertainment,
Education, Games and others.
0:12
So I'd like to give each topic
a theme by setting the icons to
0:15
different colors, like this.
0:19
So first,
I'll store the color values inside a map
0:23
that represents a collection
of theme colors.
0:26
So at the bottom of the variables partial
I'll add a comment of theme colors.
0:29
Then create a new app named,
0:36
themes.
0:41
I'm going to name each key using
mostly abbreviated words for
0:44
each VR topic and
set them to different color values.
0:48
So first for entertainment,
I'll type 'ent'
0:51
and set the value to #79ccf5.
0:57
And you can set these colors to any
value you like then right below for
1:02
architectural visualization
simply set it to arch and
1:06
set it to #d6fa6.
1:11
Below that for
1:16
education I'll just type edu and
set it to pound 23BBAE.
1:22
Let's do 'sim':
1:27
#2377bb.
1:33
Below that, for
social media i'll just type soc.
1:39
Set it to #ada3f0.
1:43
And finally games,
1:47
set to #3cb144.
1:52
Earlier, you learned that you use the map
get function to retrieve a value in a map.
2:00
Well, creating a separate rule for
each theme here and
2:05
using map get to get each color
value is extremely repetitive.
2:09
For example,
in the component icons partial,
2:13
you could use selector nesting to
create a set of icon rules like this.
2:18
Now this quickly becomes tedious and
it's not dry at all.
2:23
Notice the repeating pattern
in this nested rule.
2:27
The selector definition,
color property, and map jet function.
2:30
So loops provide a way to repeat the same
set of actions over and over again.
2:35
We can use an each loop to avoid
all this coded duplication.
2:39
So we'll start by using the each directive
followed by the current item variable.
2:42
I'll name it theme.
2:49
Add a comma after the variable,
2:53
then create a variable name that
represents the value of theme.
2:55
Since each value in the map is a color,
I'll name it color.
2:59
Then, just like earlier,
3:03
the keyword in followed by the name of
the map we're looping through, themes.
3:04
[SOUND].
3:11
So now let's output a selector and
CSS rule for each theme.
3:12
Since we're going to style the icons,
3:17
we'll prefix each selector
with the class icon.
3:19
And then we'll use interpolation to insert
3:23
the theme name into
the selector on each iteration.
3:26
And to output each color, set the color
property to the color variable.
3:34
To recap, the each directive sets theme
to each item or key in the themes map.
3:40
Then outputs each value of
theme via the color variable.
3:49
So let's say then compile our latest
changes and have a look at the output CSS.
3:55
And great, there we have our six
icon selectors and CSS rules.
4:01
Now in the HTML I already gave the icons
there respective theme class names.
4:13
So refreshing the browser shows
the different color icons perfect.
4:19
We can even place this loop inside
a mixin to make it more flexible and
4:27
best of all reusable.
4:31
So over in the mixins partial,
let's create a new mixin named themes.
4:33
The mixin will accept one parameter,
4:41
the name of the map.
4:48
So I'll name the parameter, map.
4:53
Now let's go back to the icon's partial,
4:56
cut the each loop out here and
place it inside the mixin.
5:00
And instead of looping
through the themes map,
5:05
we'll have it loop through this
specified map using the map variable.
5:09
And you could use this mixed in inside
rules sets for buttons, headings, links,
5:14
and more.
5:17
So let's make this selector dynamic
5:18
by replacing the icon prefix
with the ampersand symbol.
5:21
So now each selector will reference
the parent selector of the rule containing
5:26
the mixin include.
5:30
And now we can include this mixin inside
any rule that will use our theme colors.
5:31
I'll give the file a save and
5:36
over in the icons partial, I'll create
the parent selector for the icons.
5:38
We'll call it icn.
5:43
And inside the rule,
I'll include the themes mixin,
5:46
passing in the themes map as the argument.
5:51
And there you have it, SAS outputs all six
icon selectors from only one declaration.
5:57
So this is another wonderful example
6:05
of just how clever SAS is at
helping us write less CSS.
6:07
I've included links to more
advanced ways you can use for
6:11
and each loops with lists and
maps in the teacher's notes of this video.
6:14