1
00:00:00,025 --> 00:00:03,520
Sass maps provide a flexible
way to keep track of data

2
00:00:03,520 --> 00:00:06,050
by associating a name
with a particular value.

3
00:00:06,050 --> 00:00:09,570
For example, the name of a a social
network with its brand color.

4
00:00:09,570 --> 00:00:12,730
Let's say you're displaying a list
of links to all your company's

5
00:00:12,730 --> 00:00:13,700
social networks.

6
00:00:13,700 --> 00:00:16,150
Next to each link is
an icon font of the logo.

7
00:00:16,150 --> 00:00:19,550
And it needs to be the brand color of
that social network like Facebook and

8
00:00:19,550 --> 00:00:22,650
Twitter blue, Dribbble pink,
YouTube red and so on.

9
00:00:22,650 --> 00:00:26,470
Manually creating a selector and
rule for each social network and

10
00:00:26,470 --> 00:00:30,160
defining the brand specific color
value would be pretty tedious, right?

11
00:00:30,160 --> 00:00:34,170
Well, we can instead use maps to
make the process faster and easier.

12
00:00:35,230 --> 00:00:39,390
Inside a map, you store data in what
are called the key value pairs.

13
00:00:39,390 --> 00:00:42,620
The key is like a variable
name that belongs to the map

14
00:00:42,620 --> 00:00:44,280
like the name of the social network.

15
00:00:44,280 --> 00:00:46,640
And a key gets assigned
a value like it's brand color.

16
00:00:47,690 --> 00:00:51,364
You can access any value in a map
based on the key name you assign it.

17
00:00:51,364 --> 00:00:56,088
So, let's look at how maps make it
easy to collect key values pairs into

18
00:00:56,088 --> 00:00:59,339
name groups using our
sites break point values.

19
00:00:59,339 --> 00:01:02,051
The break extra small, small, medium and

20
00:01:02,051 --> 00:01:06,570
large variables together represent
a group of break point values.

21
00:01:06,570 --> 00:01:09,540
So instead of declaring
separate variables for

22
00:01:09,540 --> 00:01:14,920
each break point value, we can store them
within a map and access them dynamically.

23
00:01:14,920 --> 00:01:18,914
You define a Sass map using the dollar
sign immediately followed by the name of

24
00:01:18,914 --> 00:01:20,209
the map like a variable.

25
00:01:20,209 --> 00:01:24,810
So in the variables partial let's
create a map named breakpoints.

26
00:01:27,939 --> 00:01:33,050
We'll follow the name with a colon,
a set of parentheses and then a semicolon.

27
00:01:34,180 --> 00:01:38,040
Inside the parenthesis
you match keys to values.

28
00:01:38,040 --> 00:01:41,491
A key can be of any data type
like a string or number and

29
00:01:41,491 --> 00:01:43,384
each key needs to be unique.

30
00:01:43,384 --> 00:01:48,190
So let's create a key for
the extra small break point by typing

31
00:01:48,190 --> 00:01:52,270
the string xs then a colon and
a value 575 pixels.

32
00:01:52,270 --> 00:01:57,130
Each key value pair must
be comma separated.

33
00:01:57,130 --> 00:02:01,090
So now let's create the key value
pairs for the remaining breakpoints.

34
00:02:01,090 --> 00:02:08,070
I'll simply copy the small through large
variables above Paste them inside the map,

35
00:02:08,070 --> 00:02:13,340
and change the variables to
the keys small, medium, and large.

36
00:02:25,456 --> 00:02:27,850
Replacing the semicolons with commas

37
00:02:32,831 --> 00:02:37,440
Now the comma after the last
key value pair is optional.

38
00:02:37,440 --> 00:02:41,680
But developers commonly include the comma
to make it easier to add, remove or

39
00:02:41,680 --> 00:02:44,090
reorder key value pairs inside a map.

40
00:02:44,090 --> 00:02:49,708
You may also define keys
without quotes like xs and sm.

41
00:02:49,708 --> 00:02:52,530
These are 100% valid key definitions.

42
00:02:52,530 --> 00:02:54,390
But if the keys are strings like ours,

43
00:02:54,390 --> 00:02:56,210
it's a best practice to
wrap them in quotes.

44
00:02:57,780 --> 00:03:03,080
So now we've declared a global variable
of breakpoints which is a map.

45
00:03:03,080 --> 00:03:05,145
Consisting of named break point values.

46
00:03:05,145 --> 00:03:09,550
Sass provides several
functions to manipulate maps.

47
00:03:09,550 --> 00:03:14,700
Most of the time you'll use the map get
function to retrieve values from a map.

48
00:03:14,700 --> 00:03:18,210
So over in the mixins partial,

49
00:03:18,210 --> 00:03:21,330
let's return the value of
the extra small break point.

50
00:03:24,277 --> 00:03:33,030
By replacing the first break-xs variable,
with map-get.

51
00:03:33,030 --> 00:03:34,400
Followed by a set of print.

52
00:03:35,410 --> 00:03:37,520
So map get accepts two arguments.

53
00:03:37,520 --> 00:03:40,850
The name of a map, and the key for
the value you want to return.

54
00:03:40,850 --> 00:03:45,543
For instance, to get the value
of the extra small breakpoint

55
00:03:45,543 --> 00:03:50,788
stored inside the breakpoints map
passed map-get the arguments,

56
00:03:50,788 --> 00:03:54,858
breakpoints and
the string access for extra small.

57
00:03:54,858 --> 00:03:59,920
So here, map-get looks up the value

58
00:03:59,920 --> 00:04:04,480
of the xs key inside the map.

59
00:04:04,480 --> 00:04:09,090
And returns 575 pixels so
over in the output CSS, if you take a look

60
00:04:09,090 --> 00:04:13,740
at the extra small media query, you'll
see @media-width, 575 pixels, great.

61
00:04:15,518 --> 00:04:17,800
Now, using map get over and

62
00:04:17,800 --> 00:04:21,660
over again to get the values of all
break points is not only repetitive, but

63
00:04:21,660 --> 00:04:25,610
also adds more code to the mixin,
making it harder to read and maintain.

64
00:04:25,610 --> 00:04:28,240
Our mixin is already
repetitive the way it is.

65
00:04:28,240 --> 00:04:31,390
Notice how it's repeating
else if break equals and

66
00:04:31,390 --> 00:04:34,980
the min with feature for
the small to large break points.

67
00:04:34,980 --> 00:04:37,580
Well our break points Sass map

68
00:04:37,580 --> 00:04:40,890
can make the media query mixin even
less repetitive and easier to manage.

69
00:04:42,270 --> 00:04:44,490
So inside the media query mixin.

70
00:04:44,490 --> 00:04:49,400
Let's declare a local variable that stores
a value associated with a given key and

71
00:04:49,400 --> 00:04:50,510
a break points map.

72
00:04:50,510 --> 00:04:56,320
We'll name the variable value and
set it to the map get function.

73
00:05:01,279 --> 00:05:06,705
Then pass it the arguments,
breakpoints and break.

74
00:05:09,726 --> 00:05:15,509
So the mixin needs to output a media
query using the max-width media feature

75
00:05:15,509 --> 00:05:20,670
if the argument passed for
break is the extra small breakpoint key.

76
00:05:20,670 --> 00:05:26,930
So in other words, if value is
smaller than the small breakpoint.

77
00:05:26,930 --> 00:05:28,680
Now I just used the word if, so

78
00:05:28,680 --> 00:05:32,020
that's a good sign and
if statement will come in handy here.

79
00:05:32,020 --> 00:05:36,457
Right below value let's declare
another local variable,

80
00:05:36,457 --> 00:05:41,344
that will store the value of
the small key in our breakpoints map.

81
00:05:41,344 --> 00:05:47,210
We'll name it sm for small and
set it to the map get function,

82
00:05:47,210 --> 00:05:53,550
passing it the arguments,
breakpoints, and the string small.

83
00:05:59,826 --> 00:06:04,462
So now I'll delete all but
the if condition, and one of the else,

84
00:06:04,462 --> 00:06:06,835
if conditions inside the mixin.

85
00:06:07,960 --> 00:06:11,786
Select and delete the last two else, ifs.

86
00:06:11,786 --> 00:06:19,170
Then change the if statement
if value is less than small.

87
00:06:20,700 --> 00:06:24,560
Then set the max width value here
in the media query expression

88
00:06:24,560 --> 00:06:26,940
to the value variable.

89
00:06:26,940 --> 00:06:31,990
So this will output the max width
media query set to a value,

90
00:06:31,990 --> 00:06:38,110
return from the map if it's
less than the value of small.

91
00:06:38,110 --> 00:06:40,230
Otherwise, if the value is
the small breakpoint or

92
00:06:40,230 --> 00:06:43,660
larger, the mixin should output
a min width media query.

93
00:06:45,320 --> 00:06:50,470
So right below, we'll use the else
directive to output the media query,

94
00:06:51,920 --> 00:06:54,910
using the value returned
from the breakpoints map.

95
00:06:54,910 --> 00:06:59,720
So I'll set the min width value
here to the value variable.

96
00:07:04,164 --> 00:07:08,200
We'll give the save and
test it in the browser.

97
00:07:08,200 --> 00:07:14,390
Now, since we've named our break
point keys xs, sm, medium and large,

98
00:07:14,390 --> 00:07:21,290
the responsive layout should still look
and work the same as before, and it does.

99
00:07:21,290 --> 00:07:25,350
So using Sass maps made our
media query mixin leaner,

100
00:07:25,350 --> 00:07:27,460
smarter and easier to maintain.

101
00:07:28,800 --> 00:07:31,600
Now we can remove the breakpoint variables

102
00:07:31,600 --> 00:07:36,220
from our variables partial since all
breakpoints are now stored in a map.