SASS Tutorial (build your own CSS library) #8 - Maps

Key Takeaways

all right then gang so the next thing i want to talk about in sas is the use of maps and maps are a bit like associative arrays in programming languages or maybe a little bit like an object in javascript it's basically a way we can collect a lot of different variables or values together in some kind of collection and that collection is going to have key value pairs and they're really useful for generating utility classes whereby we loop through a map and generate a class for each value in that map and we'll see that later on for now i want to show you how we can use a map to kind of collect different values together that belong together and how we can manipulate or get data from that map so what i'm gonna do is create some kind of color palettes beyond our theme colors right here so it contains other colors as well so let me do a little comment first of all to say color palettes like so and now we're gonna create a map of colors and we're going to store this inside a variable i'm going to call it colors and by the way for any british people watching me i am sorry i always spell colors the american way it's just because in programming with css it uses the american spelling and so i've just picked that habit up all right then so inside this map which is denoted by parentheses by the way we can have different key value pairs so for example i could pass in the primary key and that is going to have a value of this thing right here now i don't have to hard code this down here i can just pass in the actual primary variable and that's going to grab this and then in the future if i want to change the value i'm not changing it in two places i'm only changing it in one and then it's going to update in the map in the future as well so let's do the same thing for the other theme colors because i want all those to be in the color palette and it's going to be secondary we also need one for the error so let's do that and pass in the error and then thirdly it's info and the variable is just info okay so now we can add other colors as well so i could want some kind of blue color and what i'm going to do is just paste in these different hash codes because i don't want to write them all out from scratch in fact i'm going to grab all of these and i'm just going to paste them in because it would be really boring for you to watch me write them all out so we have blue red yellow green orange purple gray black and white all of these extra colors now in our color palette and we've given a hash value for each one of these except these down here they're just using the keywords black and white which we can use in css so we have this map of colors now and this is going to be really really useful for us later when we're making things like button components or utility classes for background colors or text colors things like that for now what i want to show you is how we can use this map in terms of getting values from it adding values to it etc so down here we're just going to use the debug rule which we talked about in the last lesson to manipulate this a little bit or get data from it so i'm going to say at debug and then i'm going to use a function built into sas called map hyphen gets and what this does is get us a value from a map so i can say in here the first parameter is going to be what map we want to look at because we might have multiple maps in our files well i want to look through the colors map and then the value i want to get is the purple key so i have to pass in the key as the second argument and this is going to get us the value right here so if i save this and open up the terminal we can see right here this value 9900 ff which is the purple color awesome so let's do a few more examples see what else we can do i'm going to say at debug again and we'll say map has key and again we pass in as a first argument the map we want to look through and that's going to be colors again and we want to see has it got a secondary key so it does have a secondary key right here so this should return true so let's have a look and we can see true right there however if we look for a key that doesn't exist for example tertiary let me write that in and save it then we're going to get false so we can use this function to kind of evaluate maps to see if we have a specific variable and we'll see how we can evaluate things later on using if statements all right so let's do a couple more examples i'm going to show you how to remove a key now so we'll say at debug and we'll say map hyphen remove and we're going to remove the primary color so i'll say colors and then primary so it's looking at the colors map and it's trying to remove the value with a key of primary this thing right here and what it's going to do is log out to the console down here the map after it's been removed so if i save this now we're going to see the map and you can see now it starts at secondary the primary one is not in this map it was at the top now it's not there so that's how we remove something all right so one more how do we add something well we use the map merge function so debug again then map hyphen merge and what i'm going to do is pass in the map we want to add something to and then what we have to do is pass in another map as a second argument now remember a map is just braces or parentheses rather with key value pairs inside it so i could pass in parentheses another map with a key value pair so i could say i want to add in the pink color and that is going to have a hash of ffc 0 cb which is a pinkish color so now if i save this we're going to see this map again but now we have the pink one added to it cool so there's a few different ways we can interact with this map and we can use these different functions in selectors so let me comment those out for a second and i'm going to create some kind of test button selector like so and inside here i'm going to set the background color and it's going to be map hyphen gets and then we want to get something from the colors palette and we want to grab the purple color so that's going to get this value right here and set it to be the background color of the test button so if i was to save that now we can see it's built and if i go into the index file and go down to the bottom hopefully no we don't see there let me just search for it test hyphen btn okay it's near the top test button and it has this background color so this is how we can use it inside css selectors as well and we're going to use them to a great effect in that as well in the next lesson we're going to loop through the map using an each loop and generate classes for each one of these different colors