1
00:00:00,750 --> 00:00:02,960
All right,
now let's go back to our VR project,

2
00:00:02,960 --> 00:00:05,640
to see how we can use an each
loop to help prevent writing and

3
00:00:05,640 --> 00:00:08,510
duplicating the same code over and
over again.

4
00:00:08,510 --> 00:00:12,710
Our page displays six card items
consisting of different VR topics.

5
00:00:12,710 --> 00:00:15,650
Like Entertainment,
Education, Games and others.

6
00:00:15,650 --> 00:00:19,950
So I'd like to give each topic
a theme by setting the icons to

7
00:00:19,950 --> 00:00:21,410
different colors, like this.

8
00:00:23,600 --> 00:00:26,880
So first,
I'll store the color values inside a map

9
00:00:26,880 --> 00:00:29,650
that represents a collection
of theme colors.

10
00:00:29,650 --> 00:00:34,620
So at the bottom of the variables partial
I'll add a comment of theme colors.

11
00:00:36,400 --> 00:00:41,330
Then create a new app named,

12
00:00:41,330 --> 00:00:44,440
themes.

13
00:00:44,440 --> 00:00:48,102
I'm going to name each key using
mostly abbreviated words for

14
00:00:48,102 --> 00:00:51,236
each VR topic and
set them to different color values.

15
00:00:51,236 --> 00:00:56,400
So first for entertainment,
I'll type 'ent'

16
00:00:57,940 --> 00:01:02,100
and set the value to #79ccf5.

17
00:01:02,100 --> 00:01:06,554
And you can set these colors to any
value you like then right below for

18
00:01:06,554 --> 00:01:11,360
architectural visualization
simply set it to arch and

19
00:01:11,360 --> 00:01:16,860
set it to #d6fa6.

20
00:01:16,860 --> 00:01:22,080
Below that for

21
00:01:22,080 --> 00:01:27,115
education I'll just type edu and
set it to pound 23BBAE.

22
00:01:27,115 --> 00:01:33,401
Let's do 'sim':

23
00:01:33,401 --> 00:01:39,090
#2377bb.

24
00:01:39,090 --> 00:01:41,930
Below that, for
social media i'll just type soc.

25
00:01:43,490 --> 00:01:47,440
Set it to #ada3f0.

26
00:01:47,440 --> 00:01:52,134
And finally games,

27
00:01:52,134 --> 00:01:57,384
set to #3cb144.

28
00:02:00,404 --> 00:02:05,930
Earlier, you learned that you use the map
get function to retrieve a value in a map.

29
00:02:05,930 --> 00:02:09,620
Well, creating a separate rule for
each theme here and

30
00:02:09,620 --> 00:02:13,040
using map get to get each color
value is extremely repetitive.

31
00:02:13,040 --> 00:02:18,310
For example,
in the component icons partial,

32
00:02:18,310 --> 00:02:23,670
you could use selector nesting to
create a set of icon rules like this.

33
00:02:23,670 --> 00:02:27,830
Now this quickly becomes tedious and
it's not dry at all.

34
00:02:27,830 --> 00:02:30,385
Notice the repeating pattern
in this nested rule.

35
00:02:30,385 --> 00:02:35,415
The selector definition,
color property, and map jet function.

36
00:02:35,415 --> 00:02:39,905
So loops provide a way to repeat the same
set of actions over and over again.

37
00:02:39,905 --> 00:02:42,935
We can use an each loop to avoid
all this coded duplication.

38
00:02:42,935 --> 00:02:49,655
So we'll start by using the each directive
followed by the current item variable.

39
00:02:49,655 --> 00:02:50,775
I'll name it theme.

40
00:02:53,470 --> 00:02:55,320
Add a comma after the variable,

41
00:02:55,320 --> 00:02:59,190
then create a variable name that
represents the value of theme.

42
00:02:59,190 --> 00:03:02,240
Since each value in the map is a color,
I'll name it color.

43
00:03:03,690 --> 00:03:04,870
Then, just like earlier,

44
00:03:04,870 --> 00:03:09,040
the keyword in followed by the name of
the map we're looping through, themes.

45
00:03:11,425 --> 00:03:12,545
[SOUND].

46
00:03:12,545 --> 00:03:17,220
So now let's output a selector and
CSS rule for each theme.

47
00:03:17,220 --> 00:03:19,590
Since we're going to style the icons,

48
00:03:19,590 --> 00:03:23,480
we'll prefix each selector
with the class icon.

49
00:03:23,480 --> 00:03:26,440
And then we'll use interpolation to insert

50
00:03:26,440 --> 00:03:29,962
the theme name into
the selector on each iteration.

51
00:03:34,249 --> 00:03:39,512
And to output each color, set the color
property to the color variable.

52
00:03:40,585 --> 00:03:49,760
To recap, the each directive sets theme
to each item or key in the themes map.

53
00:03:49,760 --> 00:03:53,510
Then outputs each value of
theme via the color variable.

54
00:03:55,300 --> 00:04:00,094
So let's say then compile our latest
changes and have a look at the output CSS.

55
00:04:01,595 --> 00:04:06,389
And great, there we have our six
icon selectors and CSS rules.

56
00:04:13,970 --> 00:04:19,400
Now in the HTML I already gave the icons
there respective theme class names.

57
00:04:19,400 --> 00:04:23,510
So refreshing the browser shows
the different color icons perfect.

58
00:04:27,403 --> 00:04:31,293
We can even place this loop inside
a mixin to make it more flexible and

59
00:04:31,293 --> 00:04:33,070
best of all reusable.

60
00:04:33,070 --> 00:04:38,312
So over in the mixins partial,
let's create a new mixin named themes.

61
00:04:41,336 --> 00:04:48,765
The mixin will accept one parameter,

62
00:04:48,765 --> 00:04:53,390
the name of the map.

63
00:04:53,390 --> 00:04:55,380
So I'll name the parameter, map.

64
00:04:56,420 --> 00:04:58,850
Now let's go back to the icon's partial,

65
00:05:00,010 --> 00:05:03,970
cut the each loop out here and
place it inside the mixin.

66
00:05:05,440 --> 00:05:09,220
And instead of looping
through the themes map,

67
00:05:09,220 --> 00:05:14,080
we'll have it loop through this
specified map using the map variable.

68
00:05:14,080 --> 00:05:17,740
And you could use this mixed in inside
rules sets for buttons, headings, links,

69
00:05:17,740 --> 00:05:18,590
and more.

70
00:05:18,590 --> 00:05:21,030
So let's make this selector dynamic

71
00:05:21,030 --> 00:05:25,280
by replacing the icon prefix
with the ampersand symbol.

72
00:05:26,490 --> 00:05:30,730
So now each selector will reference
the parent selector of the rule containing

73
00:05:30,730 --> 00:05:31,960
the mixin include.

74
00:05:31,960 --> 00:05:36,580
And now we can include this mixin inside
any rule that will use our theme colors.

75
00:05:36,580 --> 00:05:38,260
I'll give the file a save and

76
00:05:38,260 --> 00:05:43,750
over in the icons partial, I'll create
the parent selector for the icons.

77
00:05:43,750 --> 00:05:44,915
We'll call it icn.

78
00:05:46,846 --> 00:05:51,492
And inside the rule,
I'll include the themes mixin,

79
00:05:51,492 --> 00:05:55,132
passing in the themes map as the argument.

80
00:05:57,782 --> 00:06:05,350
And there you have it, SAS outputs all six
icon selectors from only one declaration.

81
00:06:05,350 --> 00:06:07,840
So this is another wonderful example

82
00:06:07,840 --> 00:06:11,560
of just how clever SAS is at
helping us write less CSS.

83
00:06:11,560 --> 00:06:14,190
I've included links to more
advanced ways you can use for

84
00:06:14,190 --> 00:06:17,700
and each loops with lists and
maps in the teacher's notes of this video.