Nested Sass Maps7:20 with Guil Hernandez
In this video, we'll use nested Sass maps to create a range of tones and shades for some of our base colors.
So here in our config.scss partial, we're also able to nest maps. 0:00 And this can be useful for creating a range of tones and 0:05 shades, for our colours. 0:07 Particularly our base colors. 0:10 So say we need different shades of our base, grey colour here. 0:11 So we might use various shades of grey for 0:16 the text, form fields, maybe links and borders. 0:17 So instead of declaring separate variables for each shade of our base grey, 0:21 we are using a bunch of random SASS colour functions out in the wild in our 0:26 style sheets to lighten or darken the base colour. 0:30 It can contain every shade, inside a SASS map. 0:34 Well, let's create, a new nested map, right below the colour usage variables, 0:37 so, I will go ahead and add a comment, [SOUND] for colour palette modifiers. 0:43 [SOUND] Then we'll declare a new map called, 0:48 palettes [SOUND] and inside the map, 0:55 we'll nest a map for the grey colour palette. 1:00 So, inside, we'll say grey, followed by a colon and another set of parentheses. 1:07 And were gonna start with the base grey color. 1:16 So, lets define a key of base, then, make the value the base grey color variable. 1:18 Then right below, we'll create another one for 1:26 the dark shade of grey, so we'll call this one dark, and 1:30 we'll use SASS's darken function, to darken the base grey by, say 8%. 1:34 So we'll say, darken grey 8%. 1:40 And let's also add an extra dark shade. 1:45 So we'll say, x-dark. 1:48 And let's, darken it by 16%. 1:51 So again, we'll use, darken grey 16%. 1:55 [SOUND] And right above our base grey, we also wanna add, lighter shade. 2:01 So, above the base colour, I'll paste the light, 2:07 extra light and extra, extra light shades of grey. 2:12 So, doing this, we're able to control every shade, in one list, 2:18 instead of in a bunch of separate scss files. 2:23 So now, if we need to nest a new map, for, say, different shades of black, 2:25 we can add that right below our nested gray map, so let's say, black. 2:31 And now we can add a key of light and this time, we'll use SASS's lighten function, 2:36 to lighten our base of black colour by, say, 10%. 2:42 So we'll say, black, 10%. 2:45 And let's not forget our base colour. 2:48 So right under black, we can just write, 2:53 the black variable, which defines our base colour and let's add one more for dark. 2:56 So this time, we'll again use the darken function, to darken our base black 3:03 by 10% [SOUND] .So now to use these as colour values in our SASS rule, 3:10 we can use the map get function, which does just that. 3:16 It gets our map and the key value pairs we call. 3:21 So lets bring up our base.scss file and try these out. 3:25 So in our H1 rule here, we'll use the extra dark shade of grey, for 3:29 our heading 1. 3:34 So we'll use the colour property and then, 3:35 we'll use the map get function, followed by a set of parentheses. 3:38 Now, since we're nesting maps, we'll use map get once again, 3:43 to get the nested grey map, inside of palettes. 3:48 So we'll type map get, followed by a new set of parens. 3:52 And then we'll call the palettes map, we just wrote. 3:56 And let's, get the grey key. 4:00 Then we'll retrieve the extra dark value, by writing that extra dark key. 4:03 So now, we'll go ahead and save and compile, our SASS, and when we bring up 4:10 our CSS output, we can see how it returns that dark grey value as our colour. 4:16 Which is great but, who wants to type this 4:22 really long function every time we need to retrieve a shade of grey, right? 4:25 That's just crazy long. 4:30 So instead, let's write a commonly used function, that calls the maps for 4:31 us and returns a colour value, based on the keys we pass. 4:36 So inside our utilities.scss partials, we will write a new functions. 4:40 So, I'll just go ahead and add a comment for that. 4:45 We'll say, call [SOUND] the colour pallet modifiers. 4:47 [SOUND] So, let's call our function pallet, 4:50 [SOUND] by writing @functions, palette. 4:57 [SOUND] And we'll want to pass arguments in our function. 5:02 One will be for our nested, colour palette. 5:08 So this we'll call the grey palette or 5:12 that black palette and whatever other palette we define. 5:14 Depending on what we pass. 5:17 And we'll pass another argument for the shade. 5:18 So let's write the variable shade. 5:21 And let's default it to the base shade. 5:24 So we'll make the value, so if we don't pass a shade argument, 5:27 it will simply default to the base shade, for that given map. 5:31 So next we'll want the function to return the map, colour and shade. 5:37 So inside the function, we'll say, return. 5:41 And it, just like we did in our H1 rule, in fact, I'll just go ahead and 5:46 go back to our base.scss partial and 5:50 copy this map get function and paste it inside our new function. 5:53 [SOUND] And we'll retrieve values, from the pallets map, with map get. 6:01 So, let's replace grey, with this palette variable. 6:06 And finally we'll wanna return the colour shade, with the shade value we passed. 6:13 So I'll just go ahead and replace extra dark, with the shade variable. 6:17 So now we can save our utilities file and go back to our base.scss partial. 6:23 And in our H rule, we can call the palette function. 6:29 And the colour values. 6:33 So I'll just go ahead and, replace this long function, with the palette function. 6:34 And we'll want the extra dark shade of grey. 6:41 So we'll define the grey palette and the extra dark key. 6:43 So let's define another one for our H2, so 6:49 I'll just copy that and, paste it in our H2 rule and 6:52 instead of extra dark grey, let's call, this light grey color value. 6:56 So now when we save our SCSS file and 7:02 go back to our CSS output, at the bottom of the file, we can see how it does, 7:05 return the values and the pallets, associated with the keys we pass. 7:11 So, there is that extra dark grey and in the H2, we have the light shade of grey. 7:15
You need to sign up for Treehouse in order to download course files.Sign up