Loop Through Data in a Map with @each6:18 with Guil Hernandez
In 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
You need to sign up for Treehouse in order to download course files.Sign up