Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Modular CSS with Sass!
You have completed Modular CSS with Sass!
Preview
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