sass:map module - Mini Project: Build & Apply

Using sass:map Module to Manage Theme Colors

📖 Scenario: You are building a simple website theme. You want to keep your colors organized using Sass maps. This helps you change colors easily in one place.

🎯 Goal: Create a Sass map called $theme-colors with specific colors. Then, add a variable for a default color. Next, write a Sass function to get a color from the map by name. Finally, use that function to style the background color of the body element.

📋 What You'll Learn

Create a Sass map named $theme-colors with keys primary, secondary, and background and their exact color values.

Create a variable $default-color set to primary.

Write a Sass function get-theme-color($color-name) that returns the color from $theme-colors for the given key.

Use the get-theme-color function to set the background-color of the body selector using the $default-color.

💡 Why This Matters

🌍 Real World

Organizing colors in a Sass map helps maintain consistent themes and makes it easy to update colors in one place.

💼 Career

Knowing how to use Sass maps and functions is important for front-end developers working on scalable and maintainable CSS codebases.

1

Create the $theme-colors map

Create a Sass map called $theme-colors with these exact key-value pairs: primary: #3498db, secondary: #2ecc71, and background: #ecf0f1.

SASS

# Create the $theme-colors map with primary, secondary, and background colors
# Your code here

Hint

Use parentheses ( ) to create a map. Separate keys and values with a colon : and pairs with commas.

2

Add the $default-color variable

Create a variable called $default-color and set it to the string primary.

SASS

$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  background: #ecf0f1
);

// Create $default-color variable set to 'primary'
# Your code here

Hint

Remember to end the line with a semicolon ;.

3

Write the get-theme-color function

Write a Sass function named get-theme-color that takes one parameter $color-name. It should return the value from the $theme-colors map for the key $color-name using map.get().

SASS

$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  background: #ecf0f1
);

$default-color: primary;

// Write get-theme-color function here
# Your code here

Hint

Use @function to define a function and @return to send back a value.

4

Use the function to style the body

Add a body selector and set its background-color property to the result of calling get-theme-color($default-color).

SASS

$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  background: #ecf0f1
);

$default-color: primary;

@function get-theme-color($color-name) {
  @return map.get($theme-colors, $color-name);
}

// Add body selector with background-color using get-theme-color($default-color)
# Your code here

Hint

Use the function call inside the property value.