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.