Updated April 5, 2023
Definition of SASS Map
SASS provides the data type called map which represents one or more pairs of key values. Sass maps are static, which is to imply they cannot alter. The map, which returns a map, provides a new map and does not modify the initial map. Maps have become so important to SASS data types which is something like associative arrays in PHP, objects in JavaScript.
Some of the important facts of the SASS Map are:
- Maps will also have parentheses surrounding them.
- Maps must be distinguished by a comma.
- The key and value both could be any SASS object.
Sass map includes parentheses to distinguish key/value pairs as external delimiters, colons to map keys and values, and commas.
For instance:
$demo-map: (
name1: tom,
name2: jerry
);Having placed multiple key/value pairs at some stage we will have to get the information back. When you want to locate a key-value use the map-get () function. We will pass two parameters on it i.e. the map name and the value.
.demo:after {
content: map-get($demo-map, name1);
}When we execute the above SCSS code, we will have the below CSS output:
.demo:after {
content: tom;
}SASS Map Functions with Examples
We will discuss how to use map functions in SASS with the help of examples.
1. map-get and map-has-key functions
The map-get provides the value attached to a given key in a map and map-has-key returns if a map has an associated value for a given key.
Example
Here, we have created an HTML file called example1.html with the map-get and map-has-key functions.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS @for Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_map1.css"/>
</head>
<body>
<section class="theme-dark">
<a href="#" class="mapbutton"> Button One </a>
</section>
<section class="theme-light">
<a href="#" class="mapbutton"> Button Two </a>
</section>
</div>
</body>
</html>Now create a file called sass_map1.scss with the below code:
sass_map1.scss
$themes: (
mytheme1: theme-light,
mytheme2: theme-dark
);
@function setStyle($map, $object, $style) {
@if map-has-key($map, $object) {
@return map-get(map-get($map, $object), $style);
}
@warn "The key ´#{$object} is not present in the map...";
@return null;
}
$config: (
mytheme1: (
background: #F08080,
color: #000
),
mytheme2: (
background: #808000,
color: #fff
)
);
.mapbutton {
@each $key, $value in $themes {
@if map-has-key($config, $key) {
.#{$value} & {
background: setStyle($config, $key, background);
color: setStyle($config, $key, color);
}
} @else {
@warn "The key ´#{$key} is not defined in the $config map...´"
}
}
}
// styles for buttons
.mapbutton {
display: inline-block;
text-decoration: none;
padding: 2em 3em;
border-radius: .5em;
margin: .8em;
}Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
sass –watch sass_map1.scss: sass_map1.cssNow, execute the file with the above command and it will create the sass_map1.css file with the below code:
sass_map1.css
.theme-light .mapbutton {
background: #F08080;
color: #000;
}
.theme-dark .mapbutton {
background: #808000;
color: #fff;
}
.mapbutton {
display: inline-block;
text-decoration: none;
padding: 2em 3em;
border-radius: 0.5em;
margin: 0.8em;
}Output:
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
2. map-marge function
The map-merge function integrates two maps into one new map.
Example
Create an HTML file called example2.htmlby using map-merge function as shown in the below code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Map Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_map2.css"/>
</head>
<body>
<div class="map_color">
Welcome to EDUCBA... !!! It is a leading global provider of skill-based education. It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.
</div>
</div>
</body>
</html>Now create a file called sass_map2.scss with the below code:
sass_map2.scss
$mycolors: (
primary: #5F9EA0,
secondary: #6495ED
);
$my-colors1: (
blue: #D2691E
);
$mapmerge: map-merge($mycolors, $my-colors1);
.map_color {
padding: 2em;
background: map-get($mapmerge, blue);
}Execute the file with the above command asshown in the previous example and it will create the sass_map2.css file with the below code:
sass_map2.css
.map_color {
padding: 2em;
background: #D2691E;
}Output:
- Save the above given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
3. map-has-key and map-get functions
Here we are using map-has-key and map-get functions. The below example deals with a responsive design which uses different types of breakpoints. Based on the window width, it will change the text color. To implement this, let’s create an HTML file called example3.html with the below code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Map Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_map3.css"/>
</head>
<body><br>
<div class="heading">Welcome to EDUCBA... !!! It is a leading global provider of skill based education. It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</div>
</div>
</body>
</html>Now create a file called sass_map3.scss with the below code:
sass_map3.scss
$windsize: (
small: 767px,
medium: 992px,
large: 1200px
);
@mixin respond-to($windsize_demo) {
@if map-has-key($windsize, $windsize_demo) {
@media (min-width: #{map-get($windsize, $windsize_demo)}) {
@content;
}
}
@else {
@warn "There is no value retrieved from `#{$windsize_demo}`. "
+ "Please check whether it is defined in `$windsize` map.";
}
}
.heading {
color: green;
@include respond-to(small) {
color: blue;
}
}Execute the above files and it will create the sass_map3.css file with the below code:
sass_map3.css
.heading {
color: green;
}
@media (min-width: 767px) {
.heading {
color: blue;
}
}Output:
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
4. map-values and map-remove functions
The map-values function results in a map with the list of all values and map-remove function reverts a new map with removed keys.
Example
Here, we have created an HTML file called example4.html with the map-values and map-remove functions.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Map Directive Example </title>
<link rel="stylesheet" type="text/css" href="sass_map4.css"/>
</head>
<body><br>
<div class="heading">Welcome to EDUCBA... !!! It is a leading global provider of skill based education. It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals.</div>
</div>
</body>
</html>Now create a file called sass_map4.scss with the below code:
sass_map4.scss
$textweight: ("regular": 400, "bold": 800);
$maprmv: map-remove($textweight,"regular");
.heading{
font-weight: map-values($maprmv);
}Execute the above files and it will create the sass_map4.css file with the below code:
sass_map4.css
.heading {
font-weight: 800;
}Output:
- Save the above-given html code in html file.
- Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.
Conclusion
The function of sass maps is a useful feature. It not only makes the code more organized, but it also allows you to avoid the bloat and duplication of certain code. In SASS, maps are data structures that constitute keys and properties. The collections are manipulated with corresponding functions. For instance, you may combine two maps or delete a particular key from a map.
Maps resolve the issue and allow users to view values based on their assigned key names. The values are recorded with a numerical index only, and each value is identified with a key name. This allows us to manage data in a way that makes recovery and use easier.
Recommended Articles
This is a guide to SASS Map. Here we also discuss the definition and sass map functions along with different examples and its code implementation. You may also have a look at the following articles to learn more –
