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.

Practice

1. Which Sass built-in map function is used to check if a key exists in a map?
map-get(), map-has-key(), map-keys(), or map-values()?

easy

A. map-has-key()

B. map-get()

C. map-keys()

D. map-values()

Solution

1. Step 1: Understand the purpose of each function

   map-get() retrieves a value, map-keys() lists keys, map-values() lists values, and map-has-key() checks if a key exists.

2. Step 2: Identify the function that checks key existence

   The function map-has-key() returns true or false if a key is in the map.

3. Final Answer:

   map-has-key() -> Option A

4. Quick Check:

   Check key presence = map-has-key() [OK]

Hint: To check keys, use map-has-key() [OK]

Common Mistakes:

• Confusing map-get() with map-has-key()
• Using map-keys() to check key existence
• Thinking map-values() checks keys

2. Which of the following is the correct syntax to get the value for key "color" from a Sass map named $theme?

easy

A. map-get($theme, color)

B. map-get(color, $theme)

C. map-get($theme, $color)

D. map-get($theme, "color")

Solution

1. Step 1: Recall map-get() syntax

   The correct syntax is map-get($map, $key) where the key is a string or identifier.

2. Step 2: Identify correct key format

   Keys that are strings must be quoted with double or single quotes. Here, "color" is correct.

3. Final Answer:

   map-get($theme, "color") -> Option D

4. Quick Check:

   Correct syntax uses map-get($map, "key") [OK]

Hint: Use quotes around string keys in map-get() [OK]

Common Mistakes:

• Omitting quotes around string keys
• Swapping map and key order
• Using a variable ($color) instead of a quoted string key

3. Given the Sass map:

$settings: ("font": "Arial", "size": 16px, "color": #333);

What does map-keys($settings) return?

medium

A. ("font", "size", "color")

B. (font, size, color)

C. ["font", "size", "color"]

D. null

Solution

1. Step 1: Understand map-keys() output

   map-keys() returns a list of keys from the map, preserving quotes if keys are strings.

2. Step 2: Check keys in $settings

   Keys are strings: "font", "size", "color" so the output is a list with quoted strings.

3. Final Answer:

   ("font", "size", "color") -> Option A

4. Quick Check:

   map-keys() returns keys as list with quotes if keys are strings [OK]

Hint: map-keys() returns keys as a list with quotes if strings [OK]

Common Mistakes:

• Assuming keys lose quotes in output
• Confusing parentheses with brackets
• Expecting null or empty output

4. What is wrong with this Sass code?

$map: ("a": 1, "b": 2);
$value: map-get($map, c);

Choose the best explanation.

medium

A. map-get() cannot retrieve numeric values

B. Key c is missing quotes, causing an error

C. The map variable is not defined properly

D. map-get() requires three arguments

Solution

1. Step 1: Check map keys and usage

   The map keys are strings "a" and "b". The key used in map-get is c without quotes.

2. Step 2: Identify key type mismatch

   Since keys are strings, the key argument must be a string too. Missing quotes cause Sass to look for a variable c, which is undefined.

3. Final Answer:

   Key c is missing quotes, causing an error -> Option B

4. Quick Check:

   Keys must match type; string keys need quotes [OK]

Hint: Always quote string keys in map-get() [OK]

Common Mistakes:

• Forgetting quotes around string keys
• Thinking map-get needs 3 arguments
• Assuming map-get can't get numbers

5. You have a Sass map:

$colors: ("primary": #0055ff, "secondary": #ff5500, "tertiary": #00ff55);

Which Sass code correctly adds a new key-value pair "background": #f0f0f0 to $colors without overwriting existing keys?

hard

A. $new-colors: map-has-key($colors, "background", #f0f0f0);

B. $new-colors: map-get($colors, "background", #f0f0f0);

C. $new-colors: map-merge($colors, ("background": #f0f0f0));

D. $new-colors: map-keys($colors, "background": #f0f0f0);

Solution

1. Step 1: Understand how to add key-value pairs

   Sass maps are immutable, so to add a pair, use map-merge() which combines maps.

2. Step 2: Identify correct function usage

   map-merge($colors, ("background": #f0f0f0)) adds the new pair without removing existing ones.

3. Final Answer:

   $new-colors: map-merge($colors, ("background": #f0f0f0)); -> Option C

4. Quick Check:

   Use map-merge() to add keys without overwriting [OK]

Hint: Use map-merge() to add keys to Sass maps [OK]

Common Mistakes:

• Using map-get() to add keys
• Confusing map-has-key() with adding keys
• Trying to add keys with map-keys()