1 00:00:00,370 --> 00:00:05,550 Sass maps are fairly new to Sass, what they do is allow us to collect values in 2 00:00:05,550 --> 00:00:09,690 named groups then we can dynamically access them from anywhere really. 3 00:00:09,690 --> 00:00:14,950 So let's create a map that gives our base colors a theme name. 4 00:00:14,950 --> 00:00:19,940 So for instance we'll call the fountain blue color the default theme, 5 00:00:19,940 --> 00:00:23,610 the emerald color will be for success messages. 6 00:00:23,610 --> 00:00:28,480 Sunglo will be for errors and coral and purple-majesty will be for 7 00:00:28,480 --> 00:00:31,740 warning and info messages, respectively. 8 00:00:31,740 --> 00:00:36,340 So, these theme names will come in handy later when we need to create classes for 9 00:00:36,340 --> 00:00:41,600 UI elements like buttons, form elements, progress bars and so forth. 10 00:00:41,600 --> 00:00:45,450 So, in our config.scss partial we'll create our 11 00:00:45,450 --> 00:00:48,750 map right below the color usage variables. 12 00:00:48,750 --> 00:00:53,060 So, we'll add in new comment for UI colors. 13 00:00:53,060 --> 00:00:56,020 And we'll call our map UI colors. 14 00:00:56,020 --> 00:01:01,220 So let's write dollar sign followed by UI colors. 15 00:01:01,220 --> 00:01:02,510 And a set of parenthesis. 16 00:01:06,520 --> 00:01:11,850 So the way we retrieve values from maps is with key value pairs. 17 00:01:11,850 --> 00:01:14,780 We write a key and its associated value. 18 00:01:14,780 --> 00:01:21,150 So for example let's make the first key default and the value for 19 00:01:21,150 --> 00:01:28,220 default will be the fountain blue color variable followed by a comma. 20 00:01:28,220 --> 00:01:30,700 And right below default we'll create one for 21 00:01:30,700 --> 00:01:35,920 success and we'll make its value the emerald color variable. 22 00:01:37,810 --> 00:01:44,000 Then we'll create one for error and we'll make the value the sun glow variable. 23 00:01:47,240 --> 00:01:53,140 Another one for warning, and the value will be the coral color variable, 24 00:01:53,140 --> 00:01:57,350 and finally we'll create one more key called info and 25 00:01:57,350 --> 00:02:00,580 we'll make the value the purple majesty color variable. 26 00:02:03,130 --> 00:02:04,420 So what were going to do next, 27 00:02:04,420 --> 00:02:09,630 is write an each directive to dynamically generate a class name for each 28 00:02:09,630 --> 00:02:15,350 key in our map then output, its associated color value, as a background color. 29 00:02:15,350 --> 00:02:19,020 So in our utilities.scss partial, 30 00:02:19,020 --> 00:02:22,920 I'm going to write the each rule first, then explain what it does. 31 00:02:24,400 --> 00:02:33,355 So we'll say add each theme, color in UI colors. 32 00:02:33,355 --> 00:02:37,761 [NOISE] Go ahead and 33 00:02:37,761 --> 00:02:43,932 give it some space here. 34 00:02:43,932 --> 00:02:50,986 [SOUND] So in this rule the theme 35 00:02:50,986 --> 00:02:58,323 and color variables represent 36 00:02:58,323 --> 00:03:03,401 the key value pairs we 37 00:03:03,401 --> 00:03:10,465 created in the UI colors map. 38 00:03:10,465 --> 00:03:14,115 So here we're saying, for each theme and 39 00:03:14,115 --> 00:03:19,018 color in the UI colors map create this class selector for 40 00:03:19,018 --> 00:03:26,090 each key that dynamically appends the theme name with this theme variable. 41 00:03:26,090 --> 00:03:30,640 Then pass it's associated value as the background color. 42 00:03:30,640 --> 00:03:34,270 So this will sort of loop through each key value pair, and 43 00:03:34,270 --> 00:03:38,520 output a CSS rule for each given theme name. 44 00:03:38,520 --> 00:03:42,962 So now we'll go down to the console, and 45 00:03:42,962 --> 00:03:47,030 we'll write Sass watch scss to CSS. 46 00:03:47,030 --> 00:03:51,110 So when we bring up our CSS output, in applications.css. 47 00:03:51,110 --> 00:03:58,480 You can see how it outputs a CSS rule for each key value pair in our map. 48 00:03:58,480 --> 00:04:03,290 So, now anytime, we need to add a new color class, we can simply add it 49 00:04:03,290 --> 00:04:08,770 to our Sass map and then it'll output it with the associated color value. 50 00:04:08,770 --> 00:04:09,600 Pretty cool. 51 00:04:09,600 --> 00:04:11,190 So, the each directive and 52 00:04:11,190 --> 00:04:15,062 rule we just wrote, are doing exactly what we need them to do. 53 00:04:15,062 --> 00:04:18,510 But there's still more we can do to make things more modular and 54 00:04:18,510 --> 00:04:23,210 what I mean by that is currently the each directive rule isn't really 55 00:04:23,210 --> 00:04:28,160 reusable since we are specifically calling this UI color maps and 56 00:04:28,160 --> 00:04:32,440 in the rule we're using a particular class for buttons. 57 00:04:32,440 --> 00:04:37,158 So let's instead wrap this rule in a mixin so 58 00:04:37,158 --> 00:04:43,036 that we're able to include it in different contexts. 59 00:04:43,036 --> 00:04:48,223 So we'll create a new mixin called bgcolors so 60 00:04:48,223 --> 00:04:55,006 we'll say, mixin bg colors [SOUND] and in the next sentence, 61 00:04:55,006 --> 00:05:01,535 we'll pass one argument for the map we want to reference. 62 00:05:01,535 --> 00:05:07,190 So, let's call it map and we'll change the UI colors and map here. 63 00:05:07,190 --> 00:05:09,380 To that new map variable. 64 00:05:09,380 --> 00:05:10,780 And in the selector, 65 00:05:10,780 --> 00:05:16,210 we'll change the button class to a parent selector that appends the theme name. 66 00:05:16,210 --> 00:05:20,630 So, I'll just replace button with the and percent selector. 67 00:05:20,630 --> 00:05:23,010 And now we're able to include this new mixin, 68 00:05:23,010 --> 00:05:26,690 in any rule that needs a theme background color. 69 00:05:26,690 --> 00:05:31,830 So we'll go ahead and save this utilities partial, and we'll bring up the main .scss 70 00:05:31,830 --> 00:05:37,370 partial, and let's create a new selector by targeting the button class, and 71 00:05:37,370 --> 00:05:42,406 inside the rule we can say, include BG colors, or new mixin. 72 00:05:46,380 --> 00:05:49,840 And the map we want to pass is the ui -colors map. 73 00:05:49,840 --> 00:05:52,900 So as an argument, we'll write ui-colors. 74 00:05:52,900 --> 00:05:58,540 So now when we save and compile our Sass, and bring up the CSS output, 75 00:05:58,540 --> 00:06:03,320 we can see how it outputs the same button theme rules. 76 00:06:03,320 --> 00:06:08,340 So the neat thing is that if we wanted to create themes for progress bars. 77 00:06:08,340 --> 00:06:14,880 We can simply add that class to our selector, so we can say Prog Bar. 78 00:06:14,880 --> 00:06:19,670 Let's also add another class for Tool Tip. 79 00:06:19,670 --> 00:06:25,210 And now when we save our SASS file and bring up the output CSS. 80 00:06:25,210 --> 00:06:30,790 At the bottom of the file, we can see the classes for the progbars, tooltips and 81 00:06:30,790 --> 00:06:35,610 buttons all grouped into one rule that defines the theme background color.