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.

Practice

1. What is the main purpose of the sass:map module in Sass?

easy

A. To create animations in Sass

B. To handle media queries automatically

C. To manage key-value pairs easily in Sass stylesheets

D. To compile Sass files into CSS

Solution

1. Step 1: Understand the role of sass:map

   The sass:map module provides functions to work with maps, which are collections of key-value pairs.

2. Step 2: Identify the correct purpose

   Since maps store key-value pairs, the module helps manage these pairs easily in Sass stylesheets.

3. Final Answer:

   To manage key-value pairs easily in Sass stylesheets -> Option C

4. Quick Check:

   sass:map manages key-value pairs = B [OK]

Hint: Remember: sass:map is for key-value pairs management [OK]

Common Mistakes:

• Confusing sass:map with animation or media query features
• Thinking sass:map compiles Sass to CSS
• Assuming sass:map handles layout or grid

2. Which of the following is the correct syntax to get a value from a Sass map named $colors for the key primary using the sass:map module?

easy

A. map-get($colors, primary)

B. map-get($colors primary)

C. map-get(primary, $colors)

D. map-get($colors, 'primary')

Solution

1. Step 1: Recall the syntax of map-get

   The correct syntax is map-get($map, key) without quotes around the key unless it is a string literal.

2. Step 2: Apply to the example

   Here, $colors is the map and primary is the key, so map-get($colors, primary) is correct.

3. Final Answer:

   map-get($colors, primary) -> Option A

4. Quick Check:

   map-get(map, key) syntax = A [OK]

Hint: Use map-get(map, key) with comma and no quotes for keys [OK]

Common Mistakes:

• Omitting the comma between map and key
• Swapping the order of arguments
• Adding quotes around keys unnecessarily

3. Given the Sass map:

$theme-colors: (primary: #0055ff, secondary: #ff5500);

What will be the output CSS color for color: map-get($theme-colors, secondary);?

medium

A. #0055ff

B. #ff5500

C. secondary

D. Error: key not found

Solution

1. Step 1: Identify the map key-value pairs

   The map $theme-colors has primary: #0055ff and secondary: #ff5500.

2. Step 2: Get the value for key secondary

   Using map-get($theme-colors, secondary) returns #ff5500.

3. Final Answer:

   #ff5500 -> Option B

4. Quick Check:

   map-get returns value for key = #ff5500 [OK]

Hint: Look up the key in the map to find its color value [OK]

Common Mistakes:

• Confusing primary and secondary values
• Expecting the key name as output instead of value
• Assuming an error when key exists

4. What is wrong with this Sass code snippet?

$settings: (font-size: 16px, color: blue);
$new-settings: map-merge($settings color: red);

medium

A. Missing comma between map and new pair in map-merge

B. map-merge cannot add new keys

C. Keys must be quoted strings

D. map-merge requires three arguments

Solution

1. Step 1: Check map-merge syntax

   The correct syntax is map-merge($map, (key: value)) with a comma separating arguments and the new pairs inside parentheses.

2. Step 2: Identify the error in the snippet

   The snippet misses a comma between $settings and the new pair color: red, and the new pair is not wrapped in parentheses.

3. Final Answer:

   Missing comma between map and new pair in map-merge -> Option A

4. Quick Check:

   map-merge needs comma and parentheses = D [OK]

Hint: Always separate arguments with commas and wrap new pairs in parentheses [OK]

Common Mistakes:

• Omitting commas between arguments
• Not wrapping new key-value pairs in parentheses
• Thinking keys must be quoted

5. You have a Sass map:

$sizes: (small: 1rem, medium: 2rem, large: 3rem);

How can you create a new map $updated-sizes that changes medium to 2.5rem but keeps other sizes unchanged using sass:map functions?

hard

A. $updated-sizes: map-set($sizes, medium, 2.5rem);

B. $updated-sizes: map-get($sizes, medium: 2.5rem);

C. $updated-sizes: map-remove($sizes, medium); map-merge($sizes, (medium: 2.5rem));

D. $updated-sizes: map-merge($sizes, (medium: 2.5rem));

Solution

1. Step 1: Understand how to update a map key

   To update a key's value, map-merge can merge the original map with a new map containing the updated key-value pair.

2. Step 2: Apply map-merge to update medium

   Using map-merge($sizes, (medium: 2.5rem)) replaces the medium value while keeping others unchanged.

3. Final Answer:

   $updated-sizes: map-merge($sizes, (medium: 2.5rem)); -> Option D

4. Quick Check:

   Use map-merge to update keys = C [OK]

Hint: Use map-merge with new key-value pair to update map [OK]

Common Mistakes:

• Using map-get instead of map-merge to update
• Trying map-set with wrong argument format
• Removing key before merging unnecessarily