"How to Make a Website with WordPress" was retired on February 3, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Sass Basics!
You have completed Sass Basics!
Preview
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