Accessing map values with map-get in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass code using map-get?

Given the Sass map and the code below, what color will be assigned to background-color?

SASS

$colors: (primary: #ff0000, secondary: #00ff00, accent: #0000ff);

.my-class {
  background-color: map-get($colors, secondary);
}

A background-color: #00ff00;

B background-color: #ff0000;

C background-color: #0000ff;

D background-color: null;

💡 Hint

Remember that map-get retrieves the value for the given key in the map.

The map $colors has the key 'secondary' with value #00ff00, so map-get returns #00ff00.

🧠 Conceptual

intermediate

What happens if the key does not exist in the map?

Consider this Sass code snippet. What will be the value of color in the CSS output?

SASS

$theme-colors: (light: #eee, dark: #333);

.text {
  color: map-get($theme-colors, medium);
}

A color: null;

B color: #eee;

C color: #333;

D Syntax error during compilation

💡 Hint

If the key is missing, map-get returns null.

Since 'medium' is not a key in $theme-colors, map-get returns null, so color is null in CSS.

❓ selector

advanced

Which option correctly accesses a nested map value with map-get?

Given the nested map below, which option correctly gets the value #123456?

SASS

$palette: (
  theme1: (primary: #abcdef, secondary: #fedcba),
  theme2: (primary: #123456, secondary: #654321)
);

A map-get($palette, theme2, primary)

B map-get($palette, theme2.primary)

C map-get($palette, primary)

D map-get(map-get($palette, theme2), primary)

💡 Hint

Use map-get twice to access nested maps.

You first get the nested map for 'theme2', then get 'primary' from that nested map.

❓ layout

advanced

What CSS output results from this Sass map-get usage in a grid layout?

Given the Sass code below, what is the final CSS for the grid container's grid-template-columns?

SASS

$grid-settings: (columns: 3, gap: 1rem);

.container {
  display: grid;
  grid-template-columns: repeat(map-get($grid-settings, columns), 1fr);
  gap: map-get($grid-settings, gap);
}

A

display: grid;
grid-template-columns: repeat(3, 3fr);
gap: 1rem;

B

display: grid;
grid-template-columns: repeat(1fr, 3);
gap: 1rem;

C

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;

D

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: null;

💡 Hint

map-get returns the value for the key, which is used inside repeat() and gap.

map-get($grid-settings, columns) returns 3, and map-get($grid-settings, gap) returns 1rem, so the CSS is as in option C.

❓ accessibility

expert

How can map-get help improve accessibility in theming?

Consider a Sass map storing color themes for accessibility. Which approach correctly uses map-get to apply a high-contrast color for better readability?

SASS

$accessibility-colors: (normal: #333, high-contrast: #000000);

.text {
  color: map-get($accessibility-colors, high-contrast);
}

A It sets color to null, so the text color is inherited and may not be accessible.

B It applies a very dark color #000000 for high contrast, improving readability for users with vision impairments.

C It causes a compilation error because 'high-contrast' is not a valid key.

D It applies #333 which is too light and reduces contrast, making text harder to read.

💡 Hint

High contrast colors help users with vision difficulties read text better.

Using map-get to select the 'high-contrast' color #000000 ensures text is very dark and readable, improving accessibility.