Built-in map functions in SASS - Mini Project: Build & Apply

Using Built-in Map Functions in Sass

📖 Scenario: You are creating a simple color theme for a website using Sass. You want to store colors in a map and then use Sass's built-in map functions to access and update these colors.

🎯 Goal: Build a Sass stylesheet that defines a color map, adds a new color to the map, retrieves a color value, and uses it to style a button.

📋 What You'll Learn

Create a Sass map called $colors with three colors and their hex codes.

Add a new color to the $colors map using a built-in map function.

Retrieve the hex code of a specific color from the $colors map.

Use the retrieved color to style a button's background color.

💡 Why This Matters

🌍 Real World

Using Sass maps helps organize theme colors or settings in a clean way, making it easier to maintain and update styles in real projects.

💼 Career

Knowing how to use Sass built-in map functions is valuable for front-end developers working with CSS preprocessors to build scalable and maintainable stylesheets.

1

Create the initial color map

Create a Sass map called $colors with these exact entries: primary: #3498db, secondary: #2ecc71, and danger: #e74c3c.

SASS

# Create a Sass map called $colors with primary, secondary, and danger colors
# Your code here

Hint

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

2

Add a new color to the map

Use the Sass built-in map function map-merge() to add a new color warning: #f1c40f to the existing $colors map and assign it back to $colors.

SASS

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

// Use map-merge() to add warning color
# Your code here

Hint

Use map-merge($colors, (warning: #f1c40f)) to add the new color.

3

Retrieve a color value from the map

Use the Sass built-in map function map-get() to create a variable called $primary-color that gets the value of the primary key from the $colors map.

SASS

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

$colors: map-merge($colors, (warning: #f1c40f));

// Get the primary color from $colors
# Your code here

Hint

Use map-get($colors, primary) to get the primary color value.

4

Use the retrieved color to style a button

Create a CSS rule for a .btn-primary class that sets the background-color property to the $primary-color variable.

SASS

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

$colors: map-merge($colors, (warning: #f1c40f));

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

// Style .btn-primary background-color
# Your code here

Hint

Use .btn-primary { background-color: $primary-color; } to style the button.