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.

Practice

1. What is the main purpose of using maps in Sass?

easy

A. To write JavaScript inside Sass files

B. To group related values together for easier management

C. To create animations in CSS

D. To add comments in stylesheets

Solution

1. Step 1: Understand what maps do in Sass

   Maps store multiple related values under named keys, making styles organized.

2. Step 2: Compare options with map purpose

   Only grouping related values matches the purpose of maps.

3. Final Answer:

   To group related values together for easier management -> Option B

4. Quick Check:

   Maps group values = C [OK]

Hint: Maps group related values by keys for easy access [OK]

Common Mistakes:

• Thinking maps create animations
• Confusing maps with comments
• Believing maps run JavaScript

2. Which of the following is the correct syntax to define a Sass map named $colors with keys primary and secondary?

easy

A. $colors: (primary: #ff0000, secondary: #00ff00);

B. $colors = {primary: #ff0000, secondary: #00ff00};

C. $colors: [primary: #ff0000, secondary: #00ff00];

D. $colors: primary => #ff0000, secondary => #00ff00;

Solution

1. Step 1: Recall Sass map syntax

   Sass maps use parentheses with key: value pairs separated by commas.

2. Step 2: Check each option's syntax

   $colors: (primary: #ff0000, secondary: #00ff00); uses correct parentheses and colon syntax; others use invalid symbols or brackets.

3. Final Answer:

   $colors: (primary: #ff0000, secondary: #00ff00); -> Option A

4. Quick Check:

   Maps use (key: value) pairs [OK]

Hint: Use parentheses and colons for map syntax [OK]

Common Mistakes:

• Using curly braces instead of parentheses
• Using equal sign instead of colon
• Using square brackets instead of parentheses

3. Given the Sass map:

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

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

medium

A. #0055ff

B. map.get($theme-colors, primary)

C. primary

D. #ff5500

Solution

1. Step 1: Understand map.get() usage

   map.get() retrieves the value for the given key from the map.

2. Step 2: Identify the value for key 'primary'

   In the map, 'primary' key has value '#0055ff'.

3. Final Answer:

   #0055ff -> Option A

4. Quick Check:

   map.get returns value for key [OK]

Hint: map.get(map, key) returns the value for that key [OK]

Common Mistakes:

• Confusing key with value
• Expecting the key name as output
• Using map.get syntax incorrectly

4. Identify the error in this Sass code:

$fonts: (heading: 'Arial', body: 'Helvetica');
$main-font: map.get($fonts, 'heading');

medium

A. Map keys must be numbers, not strings

B. Map must use square brackets instead of parentheses

C. map.get() function does not exist in Sass

D. Keys in map.get() should not be quoted

Solution

1. Step 1: Check map key usage in map.get()

   In Sass, map keys are identifiers and should not be quoted when used in map.get().

2. Step 2: Verify other options

   Keys can be strings or identifiers but quoting keys in map.get() is incorrect; map.get() exists; maps use parentheses.

3. Final Answer:

   Keys in map.get() should not be quoted -> Option D

4. Quick Check:

   Use unquoted keys in map.get() [OK]

Hint: Do not quote keys inside map.get() [OK]

Common Mistakes:

• Quoting keys in map.get()
• Using wrong brackets for maps
• Thinking map.get() is invalid

5. You want to create a Sass map $button-styles that groups background, color, and border-radius for buttons. Which code correctly defines this map and accesses the color value?

hard

A. $button-styles: [background: #0088cc, color: #ffffff, border-radius: 0.5rem];
$btn-color: map.get($button-styles, color);

B. $button-styles = {background: #0088cc, color: #ffffff, border-radius: 0.5rem};
$btn-color: map.get($button-styles, 'color');

C. $button-styles: (background: #0088cc, color: #ffffff, border-radius: 0.5rem);
$btn-color: map.get($button-styles, color);

D. $button-styles: (background => #0088cc, color => #ffffff, border-radius => 0.5rem);
$btn-color: map.get($button-styles, color);

Solution

1. Step 1: Define map with correct syntax

   Maps use parentheses with key: value pairs separated by commas; keys are unquoted identifiers.

2. Step 2: Access map value correctly

   Use map.get(map, key) with unquoted key to get the value.

3. Final Answer:

   $button-styles: (background: #0088cc, color: #ffffff, border-radius: 0.5rem); $btn-color: map.get($button-styles, color); -> Option C

4. Quick Check:

   Correct map syntax and unquoted key access [OK]

Hint: Use parentheses and colons; keys unquoted in map.get() [OK]

Common Mistakes:

• Using curly braces or square brackets for maps
• Quoting keys in map.get()
• Using => instead of : in map definition