Storing Values in Maps7:37 with Guil Hernandez
Sass maps provide a flexible way to keep track of data by associating a name with a particular value.
Sass maps provide a flexible way to keep track of data 0:00 by associating a name with a particular value. 0:03 For example, the name of a a social network with its brand color. 0:06 Let's say you're displaying a list of links to all your company's 0:09 social networks. 0:12 Next to each link is an icon font of the logo. 0:13 And it needs to be the brand color of that social network like Facebook and 0:16 Twitter blue, Dribbble pink, YouTube red and so on. 0:19 Manually creating a selector and rule for each social network and 0:22 defining the brand specific color value would be pretty tedious, right? 0:26 Well, we can instead use maps to make the process faster and easier. 0:30 Inside a map, you store data in what are called the key value pairs. 0:35 The key is like a variable name that belongs to the map 0:39 like the name of the social network. 0:42 And a key gets assigned a value like it's brand color. 0:44 You can access any value in a map based on the key name you assign it. 0:47 So, let's look at how maps make it easy to collect key values pairs into 0:51 name groups using our sites break point values. 0:56 The break extra small, small, medium and 0:59 large variables together represent a group of break point values. 1:02 So instead of declaring separate variables for 1:06 each break point value, we can store them within a map and access them dynamically. 1:09 You define a Sass map using the dollar sign immediately followed by the name of 1:14 the map like a variable. 1:18 So in the variables partial let's create a map named breakpoints. 1:20 We'll follow the name with a colon, a set of parentheses and then a semicolon. 1:27 Inside the parenthesis you match keys to values. 1:34 A key can be of any data type like a string or number and 1:38 each key needs to be unique. 1:41 So let's create a key for the extra small break point by typing 1:43 the string xs then a colon and a value 575 pixels. 1:48 Each key value pair must be comma separated. 1:52 So now let's create the key value pairs for the remaining breakpoints. 1:57 I'll simply copy the small through large variables above Paste them inside the map, 2:01 and change the variables to the keys small, medium, and large. 2:08 Replacing the semicolons with commas 2:25 Now the comma after the last key value pair is optional. 2:32 But developers commonly include the comma to make it easier to add, remove or 2:37 reorder key value pairs inside a map. 2:41 You may also define keys without quotes like xs and sm. 2:44 These are 100% valid key definitions. 2:49 But if the keys are strings like ours, 2:52 it's a best practice to wrap them in quotes. 2:54 So now we've declared a global variable of breakpoints which is a map. 2:57 Consisting of named break point values. 3:03 Sass provides several functions to manipulate maps. 3:05 Most of the time you'll use the map get function to retrieve values from a map. 3:09 So over in the mixins partial, 3:14 let's return the value of the extra small break point. 3:18 By replacing the first break-xs variable, with map-get. 3:24 Followed by a set of print. 3:33 So map get accepts two arguments. 3:35 The name of a map, and the key for the value you want to return. 3:37 For instance, to get the value of the extra small breakpoint 3:40 stored inside the breakpoints map passed map-get the arguments, 3:45 breakpoints and the string access for extra small. 3:50 So here, map-get looks up the value 3:54 of the xs key inside the map. 3:59 And returns 575 pixels so over in the output CSS, if you take a look 4:04 at the extra small media query, you'll see @media-width, 575 pixels, great. 4:09 Now, using map get over and 4:15 over again to get the values of all break points is not only repetitive, but 4:17 also adds more code to the mixin, making it harder to read and maintain. 4:21 Our mixin is already repetitive the way it is. 4:25 Notice how it's repeating else if break equals and 4:28 the min with feature for the small to large break points. 4:31 Well our break points Sass map 4:34 can make the media query mixin even less repetitive and easier to manage. 4:37 So inside the media query mixin. 4:42 Let's declare a local variable that stores a value associated with a given key and 4:44 a break points map. 4:49 We'll name the variable value and set it to the map get function. 4:50 Then pass it the arguments, breakpoints and break. 5:01 So the mixin needs to output a media query using the max-width media feature 5:09 if the argument passed for break is the extra small breakpoint key. 5:15 So in other words, if value is smaller than the small breakpoint. 5:20 Now I just used the word if, so 5:26 that's a good sign and if statement will come in handy here. 5:28 Right below value let's declare another local variable, 5:32 that will store the value of the small key in our breakpoints map. 5:36 We'll name it sm for small and set it to the map get function, 5:41 passing it the arguments, breakpoints, and the string small. 5:47 So now I'll delete all but the if condition, and one of the else, 5:59 if conditions inside the mixin. 6:04 Select and delete the last two else, ifs. 6:07 Then change the if statement if value is less than small. 6:11 Then set the max width value here in the media query expression 6:20 to the value variable. 6:24 So this will output the max width media query set to a value, 6:26 return from the map if it's less than the value of small. 6:31 Otherwise, if the value is the small breakpoint or 6:38 larger, the mixin should output a min width media query. 6:40 So right below, we'll use the else directive to output the media query, 6:45 using the value returned from the breakpoints map. 6:51 So I'll set the min width value here to the value variable. 6:54 We'll give the save and test it in the browser. 7:04 Now, since we've named our break point keys xs, sm, medium and large, 7:08 the responsive layout should still look and work the same as before, and it does. 7:14 So using Sass maps made our media query mixin leaner, 7:21 smarter and easier to maintain. 7:25 Now we can remove the breakpoint variables 7:28 from our variables partial since all breakpoints are now stored in a map. 7:31
You need to sign up for Treehouse in order to download course files.Sign up