Maps for grouped values in SASS - Mini Project: Build & Apply

Using Sass Maps for Grouped Values

📖 Scenario: You are creating a style guide for a website. You want to organize colors by categories like primary, secondary, and neutral using Sass maps. This helps keep your colors neat and easy to update.

🎯 Goal: Build a Sass map called $color-palette that groups colors by category. Then, create a variable $primary-color that picks the main primary color from the map. Finally, use the primary color in a CSS rule for the body background.

📋 What You'll Learn

Create a Sass map named $color-palette with keys primary, secondary, and neutral.

Each key should map to another map with exactly two colors: main and light.

Create a variable $primary-color that gets the main color from the primary map inside $color-palette.

Use $primary-color as the background color for the body selector.

💡 Why This Matters

🌍 Real World

Organizing colors in grouped maps helps teams maintain consistent design systems and makes updating colors easier across large projects.

💼 Career

Knowing how to use Sass maps is valuable for front-end developers working with CSS preprocessors to write clean, scalable stylesheets.

1

Create the color palette map

Create a Sass map called $color-palette with these exact keys and nested maps: primary with main: #005f73 and light: #0a9396, secondary with main: #94d2bd and light: #e9d8a6, and neutral with main: #ee9b00 and light: #ca6702.

SASS

$color-palette: (
  // Your nested color maps here
);

Hint

Remember to use parentheses ( ) for maps and commas , between entries.

2

Create a variable for the primary main color

Create a variable called $primary-color that gets the main color from the primary map inside $color-palette using map-get twice.

SASS

$color-palette: (
  primary: (
    main: #005f73,
    light: #0a9396
  ),
  secondary: (
    main: #94d2bd,
    light: #e9d8a6
  ),
  neutral: (
    main: #ee9b00,
    light: #ca6702
  )
);

// Your code here to create $primary-color

Hint

Use map-get twice: first to get the primary map, then to get main color.

3

Use the primary color in a CSS rule

Write a CSS rule for the body selector that sets background-color to the variable $primary-color.

SASS

$color-palette: (
  primary: (
    main: #005f73,
    light: #0a9396
  ),
  secondary: (
    main: #94d2bd,
    light: #e9d8a6
  ),
  neutral: (
    main: #ee9b00,
    light: #ca6702
  )
);

$primary-color: map-get(map-get($color-palette, primary), main);

// Your CSS rule here

Hint

Use the body selector and set background-color to $primary-color.

4

Add a hover effect using the primary light color

Add a CSS rule for body:hover that changes the background-color to the light color from the primary map inside $color-palette. Use map-get to get this color directly inside the rule.

SASS

$color-palette: (
  primary: (
    main: #005f73,
    light: #0a9396
  ),
  secondary: (
    main: #94d2bd,
    light: #e9d8a6
  ),
  neutral: (
    main: #ee9b00,
    light: #ca6702
  )
);

$primary-color: map-get(map-get($color-palette, primary), main);

body {
  background-color: $primary-color;
}

// Your hover rule here

Hint

Use body:hover and set background-color using map-get twice to get the light primary color.

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