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.