Accessing map values with map-get in SASS - Mini Project: Build & Apply

Accessing map values with map-get in Sass

📖 Scenario: You are creating a simple style guide for a website. You want to store colors in a Sass map and then use those colors in your CSS rules.

🎯 Goal: Build a Sass stylesheet that defines a color map and uses map-get to apply colors to CSS selectors.

📋 What You'll Learn

Create a Sass map named $colors with specific color names and hex values

Create a variable named $primary-color that gets the value of blue from the $colors map using map-get

Use the $primary-color variable to set the background color of the body selector

Add a CSS rule for h1 that uses map-get directly to set the text color to red from the $colors map

💡 Why This Matters

🌍 Real World

Using Sass maps helps keep your styles organized and makes it easy to update colors or other values in one place.

💼 Career

Many front-end developers use Sass maps and map-get to manage design tokens and theme variables efficiently in real projects.

1

Create a Sass map with colors

Create a Sass map called $colors with these exact entries: red: #ff0000, blue: #0000ff, and green: #00ff00.

SASS

# Create a Sass map called $colors with red, blue, and green colors
# Your code here

Need a hint?

Use parentheses ( ) to create a map and separate entries with commas.

2

Create a variable to get the blue color from the map

Create a variable called $primary-color and set it to the value of blue from the $colors map using map-get.

SASS

$colors: (
  red: #ff0000,
  blue: #0000ff,
  green: #00ff00
);

// Create $primary-color using map-get to get blue from $colors
# Your code here

Need a hint?

Use map-get($colors, blue) to get the blue color from the map.

3

Use the primary color variable in the body selector

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

SASS

$colors: (
  red: #ff0000,
  blue: #0000ff,
  green: #00ff00
);

$primary-color: map-get($colors, blue);

// Add a body selector with background-color set to $primary-color
# Your code here

Need a hint?

Use background-color: $primary-color; inside the body block.

4

Add an h1 selector using map-get directly

Add a CSS rule for h1 that sets the color property using map-get($colors, red) directly inside the rule.

SASS

$colors: (
  red: #ff0000,
  blue: #0000ff,
  green: #00ff00
);

$primary-color: map-get($colors, blue);

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

// Add an h1 selector with color set using map-get($colors, red)
# Your code here

Need a hint?

Use color: map-get($colors, red); inside the h1 block.