sass:map module

Introduction

The sass:map module helps you work with maps in Sass easily. Maps are like little dictionaries that store pairs of keys and values.

When you want to store related style values together, like colors or font sizes.

When you need to look up a value by a name instead of remembering numbers.

When you want to update or add new style settings without changing many lines.

When you want to loop through style settings to create consistent CSS.

When you want to keep your styles organized and easy to read.

Syntax

SASS

@use "sass:map";

// Common functions:
map.get($map, $key)
map.set($map, $key, $value)
map.has-key($map, $key)
map.keys($map)
map.values($map)
map.merge($map1, $map2)
map.remove($map, $key)

You must first @use "sass:map"; to access these functions.

Maps store data as key-value pairs, like (key: value).

Examples

This gets the value for the key primary from the $colors map.

SASS

@use "sass:map";

$colors: (primary: #0055ff, secondary: #ff5500);

$primary-color: map.get($colors, primary);

This adds a new key font-weight with value bold to the $settings map.

SASS

@use "sass:map";

$settings: (font-size: 16px, line-height: 1.5);

$new-settings: map.set($settings, font-weight, bold);

This merges two maps. If keys overlap, values from the second map replace the first.

SASS

@use "sass:map";

$map1: (a: 1, b: 2);
$map2: (b: 3, c: 4);

$merged: map.merge($map1, $map2);

Sample Program

This Sass code uses the sass:map module to get and set colors in a map. It styles the body with background and text colors, links with the accent color, and a highlight class with a new color added to the map.

SASS

@use "sass:map";

$theme-colors: (
  background: #f0f0f0,
  text: #333333,
  accent: #ff6600
);

// Get the accent color
$accent-color: map.get($theme-colors, accent);

// Add a new color
$updated-colors: map.set($theme-colors, highlight, #00ccff);

body {
  background-color: map.get($updated-colors, background);
  color: map.get($updated-colors, text);
}

a {
  color: $accent-color;
}

.highlight {
  background-color: map.get($updated-colors, highlight);
  padding: 0.5rem;
  border-radius: 0.25rem;
}

Important Notes

Maps are great for grouping related style values, making your code cleaner.

Remember, map.set returns a new map; it does not change the original.

Use map.has-key to check if a key exists before getting its value.

Summary

The sass:map module helps manage key-value pairs in Sass.

Use it to get, set, merge, and check map values easily.

Maps keep your styles organized and easy to update.

Practice

1. What is the main purpose of the sass:map module in Sass?

easy

A. To create animations in Sass

B. To handle media queries automatically

C. To manage key-value pairs easily in Sass stylesheets

D. To compile Sass files into CSS

Solution

1. Step 1: Understand the role of sass:map

   The sass:map module provides functions to work with maps, which are collections of key-value pairs.

2. Step 2: Identify the correct purpose

   Since maps store key-value pairs, the module helps manage these pairs easily in Sass stylesheets.

3. Final Answer:

   To manage key-value pairs easily in Sass stylesheets -> Option C

4. Quick Check:

   sass:map manages key-value pairs = B [OK]

Hint: Remember: sass:map is for key-value pairs management [OK]

Common Mistakes:

• Confusing sass:map with animation or media query features
• Thinking sass:map compiles Sass to CSS
• Assuming sass:map handles layout or grid

2. Which of the following is the correct syntax to get a value from a Sass map named $colors for the key primary using the sass:map module?

easy

A. map-get($colors, primary)

B. map-get($colors primary)

C. map-get(primary, $colors)

D. map-get($colors, 'primary')

Solution

1. Step 1: Recall the syntax of map-get

   The correct syntax is map-get($map, key) without quotes around the key unless it is a string literal.

2. Step 2: Apply to the example

   Here, $colors is the map and primary is the key, so map-get($colors, primary) is correct.

3. Final Answer:

   map-get($colors, primary) -> Option A

4. Quick Check:

   map-get(map, key) syntax = A [OK]

Hint: Use map-get(map, key) with comma and no quotes for keys [OK]

Common Mistakes:

• Omitting the comma between map and key
• Swapping the order of arguments
• Adding quotes around keys unnecessarily

3. Given the Sass map:

$theme-colors: (primary: #0055ff, secondary: #ff5500);

What will be the output CSS color for color: map-get($theme-colors, secondary);?

medium

A. #0055ff

B. #ff5500

C. secondary

D. Error: key not found

Solution

1. Step 1: Identify the map key-value pairs

   The map $theme-colors has primary: #0055ff and secondary: #ff5500.

2. Step 2: Get the value for key secondary

   Using map-get($theme-colors, secondary) returns #ff5500.

3. Final Answer:

   #ff5500 -> Option B

4. Quick Check:

   map-get returns value for key = #ff5500 [OK]

Hint: Look up the key in the map to find its color value [OK]

Common Mistakes:

• Confusing primary and secondary values
• Expecting the key name as output instead of value
• Assuming an error when key exists

4. What is wrong with this Sass code snippet?

$settings: (font-size: 16px, color: blue);
$new-settings: map-merge($settings color: red);

medium

A. Missing comma between map and new pair in map-merge

B. map-merge cannot add new keys

C. Keys must be quoted strings

D. map-merge requires three arguments

Solution

1. Step 1: Check map-merge syntax

   The correct syntax is map-merge($map, (key: value)) with a comma separating arguments and the new pairs inside parentheses.

2. Step 2: Identify the error in the snippet

   The snippet misses a comma between $settings and the new pair color: red, and the new pair is not wrapped in parentheses.

3. Final Answer:

   Missing comma between map and new pair in map-merge -> Option A

4. Quick Check:

   map-merge needs comma and parentheses = D [OK]

Hint: Always separate arguments with commas and wrap new pairs in parentheses [OK]

Common Mistakes:

• Omitting commas between arguments
• Not wrapping new key-value pairs in parentheses
• Thinking keys must be quoted

5. You have a Sass map:

$sizes: (small: 1rem, medium: 2rem, large: 3rem);

How can you create a new map $updated-sizes that changes medium to 2.5rem but keeps other sizes unchanged using sass:map functions?

hard

A. $updated-sizes: map-set($sizes, medium, 2.5rem);

B. $updated-sizes: map-get($sizes, medium: 2.5rem);

C. $updated-sizes: map-remove($sizes, medium); map-merge($sizes, (medium: 2.5rem));

D. $updated-sizes: map-merge($sizes, (medium: 2.5rem));

Solution

1. Step 1: Understand how to update a map key

   To update a key's value, map-merge can merge the original map with a new map containing the updated key-value pair.

2. Step 2: Apply map-merge to update medium

   Using map-merge($sizes, (medium: 2.5rem)) replaces the medium value while keeping others unchanged.

3. Final Answer:

   $updated-sizes: map-merge($sizes, (medium: 2.5rem)); -> Option D

4. Quick Check:

   Use map-merge to update keys = C [OK]

Hint: Use map-merge with new key-value pair to update map [OK]

Common Mistakes:

• Using map-get instead of map-merge to update
• Trying map-set with wrong argument format
• Removing key before merging unnecessarily