sass:map module - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding map-get behavior

What will be the output of the following Sass code snippet?

$colors: (primary: #ff0000, secondary: #00ff00); $result: map-get($colors, tertiary);

Assuming this code is compiled to CSS, what will $result contain?

SASS

$colors: (primary: #ff0000, secondary: #00ff00);
$result: map-get($colors, tertiary);

A #ff0000

B null

C #000000

D Error: Key 'tertiary' not found

💡 Hint

Think about what happens when you ask for a key that does not exist in a Sass map.

The map-get function returns null if the key is not found in the map. It does not throw an error or return a default color.

📝 Syntax

intermediate

Correct syntax for map-merge

Which option correctly merges two Sass maps $map1 and $map2 so that keys in $map2 overwrite those in $map1?

SASS

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

A map-merge($map1, map-merge($map2, $map1))

B map-merge($map2, $map1)

C map-merge($map1, $map2)

D map-merge($map1, $map2, $map1)

💡 Hint

Remember the order of arguments in map-merge affects which keys overwrite.

The first argument is the original map, and the second argument's keys overwrite or add to it. So map-merge($map1, $map2) merges $map2 into $map1, overwriting keys like 'b'.

❓ selector

advanced

Using map-keys in a loop

Given the Sass map below, what will be the output CSS after compiling?

$fonts: (heading: 'Arial', body: 'Helvetica', caption: 'Courier');
@each $key in map-keys($fonts) {
  .font-#{$key} {
    font-family: map-get($fonts, $key);
  }
}

SASS

$fonts: (heading: 'Arial', body: 'Helvetica', caption: 'Courier');
@each $key in map-keys($fonts) {
  .font-#{$key} {
    font-family: map-get($fonts, $key);
  }
}

A

.font-heading { font-family: Arial; }
.font-body { font-family: Helvetica; }
.font-caption { font-family: Courier; }

B Error: map-keys cannot be used in @each loops

C

.font-heading { font-family: map-get($fonts, heading); }
.font-body { font-family: map-get($fonts, body); }
.font-caption { font-family: map-get($fonts, caption); }

D

.font-heading { font-family: 'Arial'; }
.font-body { font-family: 'Helvetica'; }
.font-caption { font-family: 'Courier'; }

💡 Hint

Check how string quotes in Sass map values are handled when compiled to CSS.

Sass preserves quotes around string values in maps when outputting CSS. So font-family values will be quoted strings.

❓ layout

advanced

Dynamic grid layout with map-get

Consider this Sass code that uses a map to define grid column sizes:

$grid-sizes: (small: 1fr, medium: 2fr, large: 3fr);
.container {
  display: grid;
  grid-template-columns: map-get($grid-sizes, medium) map-get($grid-sizes, small) map-get($grid-sizes, large);
}

What will be the value of grid-template-columns in the compiled CSS?

SASS

$grid-sizes: (small: 1fr, medium: 2fr, large: 3fr);
.container {
  display: grid;
  grid-template-columns: map-get($grid-sizes, medium) map-get($grid-sizes, small) map-get($grid-sizes, large);
}

A grid-template-columns: 2fr 1fr 3fr;

B grid-template-columns: 1fr 2fr 3fr;

C grid-template-columns: map-get($grid-sizes, medium) map-get($grid-sizes, small) map-get($grid-sizes, large);

D grid-template-columns: 3fr 2fr 1fr;

💡 Hint

Remember the order of arguments in the property and how map-get returns values.

The property sets columns in the order: medium, small, large. map-get returns the values for those keys, so the output is '2fr 1fr 3fr'.

❓ accessibility

expert

Using Sass maps for accessible color themes

You have a Sass map defining color themes for accessibility:

$themes: (
  light: (background: #ffffff, text: #000000),
  dark: (background: #000000, text: #ffffff)
);

.theme-light {
  background-color: map-get(map-get($themes, light), background);
  color: map-get(map-get($themes, light), text);
}

.theme-dark {
  background-color: map-get(map-get($themes, dark), background);
  color: map-get(map-get($themes, dark), text);
}

What is the background and text color of the .theme-dark class in the compiled CSS?

SASS

$themes: (
  light: (background: #ffffff, text: #000000),
  dark: (background: #000000, text: #ffffff)
);

.theme-light {
  background-color: map-get(map-get($themes, light), background);
  color: map-get(map-get($themes, light), text);
}

.theme-dark {
  background-color: map-get(map-get($themes, dark), background);
  color: map-get(map-get($themes, dark), text);
}

A background-color: #000000; color: #ffffff;

B background-color: #ffffff; color: #000000;

C background-color: map-get(map-get($themes, dark), background); color: map-get(map-get($themes, dark), text);

D background-color: #111111; color: #eeeeee;

💡 Hint

Check the nested map values for the 'dark' theme keys.

The nested map for 'dark' has background #000000 and text #ffffff, so those values appear in the compiled CSS.

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