Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll use nested Sass maps to create a range of tones and shades for some of our base colors.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up