Maps for grouped values in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Sass Maps for Grouped Values

What is the output of the following Sass code when compiled to CSS?

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

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

SASS

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

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

A

.button {
  color: #ff0000;
}

B

.button {
  color: primary;
}

C

.button {
  color: #00ff00;
}

D

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

💡 Hint

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

The map-get function returns the value associated with the key 'primary' in the $colors map, which is #ff0000. This value is then used as the color property in the compiled CSS.

📝 Syntax

intermediate

Correct Syntax for Nested Sass Maps

Which option correctly defines a nested Sass map for grouped color values?

A $theme-colors: (light: (background: #fff, text: #000), dark: (background: #000, text: #fff));

B $theme-colors: [light: [background: #fff, text: #000], dark: [background: #000, text: #fff]];

C $theme-colors: (light => (background => #fff, text => #000), dark => (background => #000, text => #fff));

D $theme-colors: (light: background: #fff, text: #000, dark: background: #000, text: #fff);

💡 Hint

Sass maps use parentheses and colons for key-value pairs, not arrows or square brackets.

Option A correctly uses parentheses and colons to define nested maps. Options A, C, and D use invalid syntax for Sass maps.

❓ rendering

advanced

Rendering CSS from Nested Sass Maps

Given the Sass map below, what is the compiled CSS output?

$themes: (
  light: (background: #fff, text: #000),
  dark: (background: #000, text: #fff)
);

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

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

SASS

$themes: (
  light: (background: #fff, text: #000),
  dark: (background: #000, text: #fff)
);

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

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

A

body.light-theme {
  background-color: light;
  color: text;
}

body.dark-theme {
  background-color: dark;
  color: text;
}

B

body.light-theme {
  background-color: #fff;
  color: #000;
}

body.dark-theme {
  background-color: #000;
  color: #fff;
}

C

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

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

D

body.light-theme {
  background-color: #000;
  color: #fff;
}

body.dark-theme {
  background-color: #fff;
  color: #000;
}

💡 Hint

Nested map-get calls retrieve inner map values by keys.

The outer map-get gets the nested map for 'light' or 'dark'. The inner map-get retrieves the 'background' or 'text' color from that nested map. This produces the correct color values in the CSS.

❓ selector

advanced

Using Sass Maps to Generate Multiple CSS Classes

What is the compiled CSS output of this Sass code?

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

@each $name, $size in $sizes {
  .font-#{$name} {
    font-size: $size;
  }
}

SASS

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

@each $name, $size in $sizes {
  .font-#{$name} {
    font-size: $size;
  }
}

A

.font-small {
  font-size: 3rem;
}
.font-medium {
  font-size: 2rem;
}
.font-large {
  font-size: 1rem;
}

B

.font-small {
  font-size: small;
}
.font-medium {
  font-size: medium;
}
.font-large {
  font-size: large;
}

C

.font-#{$name} {
  font-size: $size;
}

D

.font-small {
  font-size: 1rem;
}
.font-medium {
  font-size: 2rem;
}
.font-large {
  font-size: 3rem;
}

💡 Hint

The @each loop iterates over map keys and values to create classes with interpolated names and sizes.

The @each loop creates three classes: .font-small, .font-medium, and .font-large, each with the corresponding font-size from the map values.

❓ accessibility

expert

Using Sass Maps to Manage Accessible Color Themes

Consider this Sass map for color themes including contrast colors for accessibility:

$themes: (
  light: (background: #ffffff, text: #000000, contrast: #ff0000),
  dark: (background: #000000, text: #ffffff, contrast: #00ff00)
);

// Which CSS rule ensures the contrast color is used only for focus outlines to improve accessibility?

.focus-outline {
  outline-color: map-get(map-get($themes, dark), contrast);
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

SASS

$themes: (
  light: (background: #ffffff, text: #000000, contrast: #ff0000),
  dark: (background: #000000, text: #ffffff, contrast: #00ff00)
);

.focus-outline {
  outline-color: map-get(map-get($themes, dark), contrast);
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

A

.focus-outline:hover {
  outline-color: #00ff00;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

B

.focus-outline {
  outline-color: #00ff00;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

C

.focus-outline:focus {
  outline-color: #00ff00;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

D

.focus-outline:active {
  outline-color: #00ff00;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

💡 Hint

Focus outlines should appear only when an element is focused, not always or on hover.

Using the :focus pseudo-class ensures the outline appears only when the element is focused, improving accessibility by helping keyboard users see focus states without distracting mouse users.