Colors with Sass Maps6:35 with Guil Hernandez
Let's create a Sass map that gives our base colors a theme name. These theme names will come in handy later when we need to create classes for UI elements like buttons, form elements, progress bars, and more.
Sass maps are fairly new to Sass, what they do is allow us to collect values in 0:00 named groups then we can dynamically access them from anywhere really. 0:05 So let's create a map that gives our base colors a theme name. 0:09 So for instance we'll call the fountain blue color the default theme, 0:14 the emerald color will be for success messages. 0:19 Sunglo will be for errors and coral and purple-majesty will be for 0:23 warning and info messages, respectively. 0:28 So, these theme names will come in handy later when we need to create classes for 0:31 UI elements like buttons, form elements, progress bars and so forth. 0:36 So, in our config.scss partial we'll create our 0:41 map right below the color usage variables. 0:45 So, we'll add in new comment for UI colors. 0:48 And we'll call our map UI colors. 0:53 So let's write dollar sign followed by UI colors. 0:56 And a set of parenthesis. 1:01 So the way we retrieve values from maps is with key value pairs. 1:06 We write a key and its associated value. 1:11 So for example let's make the first key default and the value for 1:14 default will be the fountain blue color variable followed by a comma. 1:21 And right below default we'll create one for 1:28 success and we'll make its value the emerald color variable. 1:30 Then we'll create one for error and we'll make the value the sun glow variable. 1:37 Another one for warning, and the value will be the coral color variable, 1:47 and finally we'll create one more key called info and 1:53 we'll make the value the purple majesty color variable. 1:57 So what were going to do next, 2:03 is write an each directive to dynamically generate a class name for each 2:04 key in our map then output, its associated color value, as a background color. 2:09 So in our utilities.scss partial, 2:15 I'm going to write the each rule first, then explain what it does. 2:19 So we'll say add each theme, color in UI colors. 2:24 [NOISE] Go ahead and 2:33 give it some space here. 2:37 [SOUND] So in this rule the theme 2:43 and color variables represent 2:50 the key value pairs we 2:58 created in the UI colors map. 3:03 So here we're saying, for each theme and 3:10 color in the UI colors map create this class selector for 3:14 each key that dynamically appends the theme name with this theme variable. 3:19 Then pass it's associated value as the background color. 3:26 So this will sort of loop through each key value pair, and 3:30 output a CSS rule for each given theme name. 3:34 So now we'll go down to the console, and 3:38 we'll write Sass watch scss to CSS. 3:42 So when we bring up our CSS output, in applications.css. 3:47 You can see how it outputs a CSS rule for each key value pair in our map. 3:51 So, now anytime, we need to add a new color class, we can simply add it 3:58 to our Sass map and then it'll output it with the associated color value. 4:03 Pretty cool. 4:08 So, the each directive and 4:09 rule we just wrote, are doing exactly what we need them to do. 4:11 But there's still more we can do to make things more modular and 4:15 what I mean by that is currently the each directive rule isn't really 4:18 reusable since we are specifically calling this UI color maps and 4:23 in the rule we're using a particular class for buttons. 4:28 So let's instead wrap this rule in a mixin so 4:32 that we're able to include it in different contexts. 4:37 So we'll create a new mixin called bgcolors so 4:43 we'll say, mixin bg colors [SOUND] and in the next sentence, 4:48 we'll pass one argument for the map we want to reference. 4:55 So, let's call it map and we'll change the UI colors and map here. 5:01 To that new map variable. 5:07 And in the selector, 5:09 we'll change the button class to a parent selector that appends the theme name. 5:10 So, I'll just replace button with the and percent selector. 5:16 And now we're able to include this new mixin, 5:20 in any rule that needs a theme background color. 5:23 So we'll go ahead and save this utilities partial, and we'll bring up the main .scss 5:26 partial, and let's create a new selector by targeting the button class, and 5:31 inside the rule we can say, include BG colors, or new mixin. 5:37 And the map we want to pass is the ui -colors map. 5:46 So as an argument, we'll write ui-colors. 5:49 So now when we save and compile our Sass, and bring up the CSS output, 5:52 we can see how it outputs the same button theme rules. 5:58 So the neat thing is that if we wanted to create themes for progress bars. 6:03 We can simply add that class to our selector, so we can say Prog Bar. 6:08 Let's also add another class for Tool Tip. 6:14 And now when we save our SASS file and bring up the output CSS. 6:19 At the bottom of the file, we can see the classes for the progbars, tooltips and 6:25 buttons all grouped into one rule that defines the theme background color. 6:30
You need to sign up for Treehouse in order to download course files.Sign up