1
00:00:00,260 --> 00:00:05,230
So here in our config.scss partial, we're
also able to nest maps.

2
00:00:05,230 --> 00:00:07,980
And this can be useful for creating a
range of tones and

3
00:00:07,980 --> 00:00:10,040
shades, for our colours.

4
00:00:10,040 --> 00:00:11,750
Particularly our base colors.

5
00:00:11,750 --> 00:00:16,010
So say we need different shades of our
base, grey colour here.

6
00:00:16,010 --> 00:00:17,970
So we might use various shades of grey for

7
00:00:17,970 --> 00:00:21,800
the text, form fields, maybe links and
borders.

8
00:00:21,800 --> 00:00:26,390
So instead of declaring separate variables
for each shade of our base grey,

9
00:00:26,390 --> 00:00:30,782
we are using a bunch of random SASS colour
functions out in the wild in our

10
00:00:30,782 --> 00:00:34,200
style sheets to lighten or darken the base
colour.

11
00:00:34,200 --> 00:00:37,510
It can contain every shade, inside a SASS
map.

12
00:00:37,510 --> 00:00:43,351
Well, let's create, a new nested map,
right below the colour usage variables,

13
00:00:43,351 --> 00:00:48,700
so, I will go ahead and add a comment,
[SOUND] for colour palette modifiers.

14
00:00:48,700 --> 00:00:55,260
[SOUND] Then we'll declare a new map
called,

15
00:00:55,260 --> 00:01:00,580
palettes [SOUND] and inside the map,

16
00:01:00,580 --> 00:01:07,507
we'll nest a map for the grey colour
palette.

17
00:01:07,507 --> 00:01:13,380
So, inside, we'll say grey, followed by a
colon and another set of parentheses.

18
00:01:16,210 --> 00:01:18,700
And were gonna start with the base grey
color.

19
00:01:18,700 --> 00:01:26,499
So, lets define a key of base, then, make
the value the base grey color variable.

20
00:01:26,499 --> 00:01:30,148
Then right below, we'll create another one
for

21
00:01:30,148 --> 00:01:34,420
the dark shade of grey, so we'll call this
one dark, and

22
00:01:34,420 --> 00:01:40,133
we'll use SASS's darken function, to
darken the base grey by, say 8%.

23
00:01:40,133 --> 00:01:45,618
So we'll say, darken grey 8%.

24
00:01:45,618 --> 00:01:48,470
And let's also add an extra dark shade.

25
00:01:48,470 --> 00:01:50,884
So we'll say, x-dark.

26
00:01:51,960 --> 00:01:55,020
And let's, darken it by 16%.

27
00:01:55,020 --> 00:02:01,585
So again, we'll use, darken grey 16%.

28
00:02:01,585 --> 00:02:07,145
[SOUND] And right above our base grey, we
also wanna add, lighter shade.

29
00:02:07,145 --> 00:02:12,778
So, above the base colour, I'll paste the
light,

30
00:02:12,778 --> 00:02:18,450
extra light and extra, extra light shades
of grey.

31
00:02:18,450 --> 00:02:23,200
So, doing this, we're able to control
every shade, in one list,

32
00:02:23,200 --> 00:02:25,920
instead of in a bunch of separate scss
files.

33
00:02:25,920 --> 00:02:31,220
So now, if we need to nest a new map, for,
say, different shades of black,

34
00:02:31,220 --> 00:02:36,520
we can add that right below our nested
gray map, so let's say, black.

35
00:02:36,520 --> 00:02:42,130
And now we can add a key of light and this
time, we'll use SASS's lighten function,

36
00:02:42,130 --> 00:02:45,400
to lighten our base of black colour by,
say, 10%.

37
00:02:45,400 --> 00:02:48,915
So we'll say, black, 10%.

38
00:02:48,915 --> 00:02:53,530
And let's not forget our base colour.

39
00:02:53,530 --> 00:02:56,980
So right under black, we can just write,

40
00:02:56,980 --> 00:03:03,030
the black variable, which defines our base
colour and let's add one more for dark.

41
00:03:03,030 --> 00:03:10,080
So this time, we'll again use the darken
function, to darken our base black

42
00:03:10,080 --> 00:03:16,479
by 10% [SOUND] .So now to use these as
colour values in our SASS rule,

43
00:03:16,479 --> 00:03:21,487
we can use the map get function, which
does just that.

44
00:03:21,487 --> 00:03:25,490
It gets our map and the key value pairs we
call.

45
00:03:25,490 --> 00:03:29,140
So lets bring up our base.scss file and
try these out.

46
00:03:29,140 --> 00:03:34,710
So in our H1 rule here, we'll use the
extra dark shade of grey, for

47
00:03:34,710 --> 00:03:35,430
our heading 1.

48
00:03:35,430 --> 00:03:38,480
So we'll use the colour property and then,

49
00:03:38,480 --> 00:03:43,940
we'll use the map get function, followed
by a set of parentheses.

50
00:03:43,940 --> 00:03:48,490
Now, since we're nesting maps, we'll use
map get once again,

51
00:03:48,490 --> 00:03:52,550
to get the nested grey map, inside of
palettes.

52
00:03:52,550 --> 00:03:55,830
So we'll type map get, followed by a new
set of parens.

53
00:03:56,930 --> 00:04:00,720
And then we'll call the palettes map, we
just wrote.

54
00:04:00,720 --> 00:04:03,930
And let's, get the grey key.

55
00:04:03,930 --> 00:04:10,538
Then we'll retrieve the extra dark value,
by writing that extra dark key.

56
00:04:10,538 --> 00:04:16,120
So now, we'll go ahead and save and
compile, our SASS, and when we bring up

57
00:04:16,120 --> 00:04:22,380
our CSS output, we can see how it returns
that dark grey value as our colour.

58
00:04:22,380 --> 00:04:25,790
Which is great but, who wants to type this

59
00:04:25,790 --> 00:04:30,030
really long function every time we need to
retrieve a shade of grey, right?

60
00:04:30,030 --> 00:04:31,970
That's just crazy long.

61
00:04:31,970 --> 00:04:36,100
So instead, let's write a commonly used
function, that calls the maps for

62
00:04:36,100 --> 00:04:40,200
us and returns a colour value, based on
the keys we pass.

63
00:04:40,200 --> 00:04:45,490
So inside our utilities.scss partials, we
will write a new functions.

64
00:04:45,490 --> 00:04:47,660
So, I'll just go ahead and add a comment
for that.

65
00:04:47,660 --> 00:04:50,968
We'll say, call [SOUND] the colour pallet
modifiers.

66
00:04:50,968 --> 00:04:57,076
[SOUND] So, let's call our function
pallet,

67
00:04:57,076 --> 00:05:02,870
[SOUND] by writing @functions, palette.

68
00:05:02,870 --> 00:05:08,464
[SOUND] And we'll want to pass arguments
in our function.

69
00:05:08,464 --> 00:05:12,240
One will be for our nested, colour
palette.

70
00:05:12,240 --> 00:05:14,120
So this we'll call the grey palette or

71
00:05:14,120 --> 00:05:17,470
that black palette and whatever other
palette we define.

72
00:05:17,470 --> 00:05:18,960
Depending on what we pass.

73
00:05:18,960 --> 00:05:21,690
And we'll pass another argument for the
shade.

74
00:05:21,690 --> 00:05:24,740
So let's write the variable shade.

75
00:05:24,740 --> 00:05:27,500
And let's default it to the base shade.

76
00:05:27,500 --> 00:05:31,890
So we'll make the value, so if we don't
pass a shade argument,

77
00:05:31,890 --> 00:05:37,010
it will simply default to the base shade,
for that given map.

78
00:05:37,010 --> 00:05:41,250
So next we'll want the function to return
the map, colour and shade.

79
00:05:41,250 --> 00:05:45,130
So inside the function, we'll say, return.

80
00:05:46,670 --> 00:05:50,300
And it, just like we did in our H1 rule,
in fact, I'll just go ahead and

81
00:05:50,300 --> 00:05:53,400
go back to our base.scss partial and

82
00:05:53,400 --> 00:05:58,300
copy this map get function and paste it
inside our new function.

83
00:06:01,560 --> 00:06:06,705
[SOUND] And we'll retrieve values, from
the pallets map, with map get.

84
00:06:06,705 --> 00:06:13,940
So, let's replace grey, with this palette
variable.

85
00:06:13,940 --> 00:06:17,760
And finally we'll wanna return the colour
shade, with the shade value we passed.

86
00:06:17,760 --> 00:06:23,200
So I'll just go ahead and replace extra
dark, with the shade variable.

87
00:06:23,200 --> 00:06:29,850
So now we can save our utilities file and
go back to our base.scss partial.

88
00:06:29,850 --> 00:06:33,780
And in our H rule, we can call the palette
function.

89
00:06:33,780 --> 00:06:34,610
And the colour values.

90
00:06:34,610 --> 00:06:41,460
So I'll just go ahead and, replace this
long function, with the palette function.

91
00:06:41,460 --> 00:06:43,560
And we'll want the extra dark shade of
grey.

92
00:06:43,560 --> 00:06:49,050
So we'll define the grey palette and the
extra dark key.

93
00:06:49,050 --> 00:06:52,656
So let's define another one for our H2, so

94
00:06:52,656 --> 00:06:56,943
I'll just copy that and, paste it in our
H2 rule and

95
00:06:56,943 --> 00:07:02,910
instead of extra dark grey, let's call,
this light grey color value.

96
00:07:02,910 --> 00:07:05,500
So now when we save our SCSS file and

97
00:07:05,500 --> 00:07:11,360
go back to our CSS output, at the bottom
of the file, we can see how it does,

98
00:07:11,360 --> 00:07:15,250
return the values and the pallets,
associated with the keys we pass.

99
00:07:15,250 --> 00:07:19,805
So, there is that extra dark grey and in
the H2, we have the light shade of grey.