Table of Contents
URL: https://www.progressiverobot.com/sass-sass-maps/
If you're familiar with programming languages, Sass maps are similar to arrays (in PHP or [JavaScript](/js/)) or dictionaries (in Python). If you’re not, think of them as lists that group similar items together.
A Sass map has keyword (key) and value pairs and is used to group similar variables – for example theme colours or breakpoints. They then get used with the map-get function – with the map as the first parameter and keyword:
<^>$theme<^>: (
primary: #f00,
secondary: #0f0,
neutral: #f2f2f2
);
a {
color: <^>map-get($theme, primary)<^>;
}
div {
background-color: map-get($theme, neutral);
color: map-get($theme, secondary);
}
Sass maps are extremely useful for making your code more readable and consistent. Using a map, you can loop through your results, making your CSS less repetitive. For more on this checkout out the Sass @each loops snippet.
If you don’t want to have a key/value pair, Sass lists can be used for simple lists.
