Maps in SASS

This article explains maps in SASS.

We will explain the basics to advanced usage of SASS maps, and provide practical examples.

YouTube Video

Maps in SASS

What is a Map in SASS?

A map in SASS is a data structure that holds key-value pairs, similar to objects in JavaScript or dictionaries in Python. By using maps in SASS, you can manage complex styles concisely and improve maintainability.

Basic Syntax of Maps

Maps in SASS are defined using () (parentheses). The syntax is as follows:.

1$map-name: (
2  key1: value1,
3  key2: value2,
4  key3: value3
5);

For example, to create a map for managing color themes, you can define it as shown below:.

1$colors: (
2  primary: #3498db,
3  secondary: #2ecc71,
4  danger: #e74c3c
5);

Getting Values from a Map

In SASS, you use the map.get() function to retrieve a value from a map.

Usage example:

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8.button {
 9  background-color: map.get($colors, primary);
10}

Output:

1.button {
2  background-color: #3498db;
3}

• This code gets the primary color value from the $colors map and applies it to the button's background color.

Setting Keys and Values in a Map

Using the map.set() function, you can assign a new value to a specified key. If the key already exists, its value will be overwritten.

Example Usage

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8// set danger color
 9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12  background-color: map.get($updated-colors, danger);
13}

• This code adds a danger key to the map and sets its value as the button's background color.

Output

1.button-danger {
2  background-color: #e74c3c;
3}

Removing Keys from a Map

By using the map.remove() function, you can remove a specific key and its value from a map.

Example Usage

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13  background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17  background-color: map.get($reduced-colors, danger);
18}

• This code removes the danger key from the map, so the background color of button-danger will be null.

Output

1.button-primary {
2  background-color: #3498db;
3}

Adding Keys and Values to a Map

Using the map.merge() function, you can add new keys and values to an existing map.

Example Usage

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8$extended-colors: map.merge($colors, (danger: #e74c3c));
 9
10.button-danger {
11  background-color: map.get($extended-colors, danger);
12}

• This code adds a danger key to an existing SASS map and sets its color as the button's background color.

Output

1.button-danger {
2  background-color: #e74c3c;
3}

Adding Multiple Keys and Values to a Map

With the map.merge() function, you can add multiple new keys and values to an existing map at once.

Example Usage

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8$extended-colors: map.merge($colors, (
 9  danger: #e74c3c,
10  warning: #f39c12,
11  info: #8e44ad
12));
13
14.button-danger {
15  background-color: map.get($extended-colors, danger);
16}

• This code adds multiple keys and values at the same time to an existing SASS map.

Checking for Keys in a Map

The map.has-key() function lets you check if a specific key exists in a map.

Example Usage

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger);  // false

Getting All Keys or Values from a Map

Getting all keys

Using the map.keys() function, you can retrieve all the keys.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)

Getting all values

Using the map.values() function, you can retrieve all the values.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)

Looping through a Map

In SASS, you can use the @each directive to loop through a map.

Example Usage

 1$colors: (
 2  primary: #3498db,
 3  secondary: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $color in $colors {
 8  .color-#{$name} {
 9    background-color: $color;
10  }
11}

• This code loops through each key and value in a SASS map and automatically generates a class for each color.

Output

 1.color-primary {
 2  background-color: #3498db;
 3}
 4
 5.color-secondary {
 6  background-color: #2ecc71;
 7}
 8
 9.color-danger {
10  background-color: #e74c3c;
11}

Handling Nested Maps

Maps can also have a nested structure. In this case, use nested map.get() functions.

Example Usage

 1@use "sass:map";
 2
 3$themes: (
 4  light: (
 5    background: #ffffff,
 6    text: #000000
 7  ),
 8  dark: (
 9    background: #000000,
10    text: #ffffff
11  )
12);
13
14body {
15  background-color: map.get(map.get($themes, light), background);
16  color: map.get(map.get($themes, light), text);
17}

• This code gets the background and text colors for the light theme from a nested SASS map and applies them to the body.

Output

1body {
2  background-color: #ffffff;
3  color: #000000;
4}

Map Use Case: Responsive Design

By using maps, you can easily manage media queries and responsive design.

Example Usage

 1$breakpoints: (
 2  small: 480px,
 3  medium: 768px,
 4  large: 1024px
 5);
 6
 7@each $label, $size in $breakpoints {
 8  @media (max-width: $size) {
 9    .container-#{$label} {
10      width: 100%;
11    }
12  }
13}

• This code uses a SASS map to automatically generate responsive container classes for each breakpoint.

Output

 1@media (max-width: 480px) {
 2  .container-small {
 3    width: 100%;
 4  }
 5}
 6
 7@media (max-width: 768px) {
 8  .container-medium {
 9    width: 100%;
10  }
11}
12
13@media (max-width: 1024px) {
14  .container-large {
15    width: 100%;
16  }
17}

Conclusion

SASS maps are a powerful tool for organizing your stylesheet, increasing flexibility and reusability. They can be used in many scenarios, such as value management, looping, and implementing responsive design.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video