Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Sass maps provide a flexible way to keep track of data by associating a name with a particular value.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up