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
);

Need a 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

Need a 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

Need a 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

Need a hint?

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