Breakpoint variables and maps in SASS - Mini Project: Build & Apply

Responsive Layout with Breakpoint Variables and Maps in Sass

📖 Scenario: You are building a simple responsive webpage layout. You want to use Sass to manage your breakpoints easily so the layout changes smoothly on different screen sizes.

🎯 Goal: Create a Sass file that defines breakpoint variables inside a map, then use those breakpoints to write media queries that change the background color of a container for mobile, tablet, and desktop screens.

📋 What You'll Learn

Define a Sass map called $breakpoints with keys mobile, tablet, and desktop and their exact pixel values.

Create a variable $base-color with the value #f0f0f0.

Use the @media rule with the breakpoint values from the map to change the container background color for each screen size.

Write valid Sass code that compiles to CSS with correct media queries.

💡 Why This Matters

🌍 Real World

Using breakpoint maps in Sass helps developers manage responsive designs easily and consistently across large projects.

💼 Career

Front-end developers often use Sass maps and variables to write maintainable and scalable CSS for responsive websites.

1

Create the breakpoint map

Create a Sass map called $breakpoints with these exact entries: mobile: 480px, tablet: 768px, and desktop: 1024px.

SASS

# Create the $breakpoints map with mobile, tablet, and desktop keys
# Your code here

Hint

Use parentheses ( ) to create a map in Sass. Separate each key-value pair with a comma.

2

Add a base color variable

Create a variable called $base-color and set it to the color #f0f0f0.

SASS

$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px
);

// Create $base-color variable
# Your code here

Hint

Use $base-color: #f0f0f0; to create a color variable in Sass.

3

Write media queries using the breakpoint map

Write three @media queries using the values from the $breakpoints map. Use map-get($breakpoints, mobile), map-get($breakpoints, tablet), and map-get($breakpoints, desktop) to get the pixel values. Inside each media query, set the background color of the .container class to #d0f0d0 for mobile, #f0d0d0 for tablet, and #d0d0f0 for desktop.

SASS

$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px
);

$base-color: #f0f0f0;

// Write media queries for .container background colors
# Your code here

Hint

Use @media with map-get($breakpoints, key) to access breakpoint values. Write CSS inside the media query blocks.

4

Add the base container style

Add a style for the .container class outside the media queries that sets its background color to the $base-color variable.

SASS

$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px
);

$base-color: #f0f0f0;

// Add base .container background color here
# Your code here

@media (max-width: map-get($breakpoints, mobile)) {
  .container {
    background-color: #d0f0d0;
  }
}

@media (min-width: map-get($breakpoints, tablet)) and (max-width: map-get($breakpoints, desktop)) {
  .container {
    background-color: #f0d0d0;
  }
}

@media (min-width: map-get($breakpoints, desktop)) {
  .container {
    background-color: #d0d0f0;
  }
}

Hint

Write the base style for .container before the media queries to set the default background color.

Practice

1. What is the main purpose of using breakpoint variables and maps in Sass?

easy

A. To manage responsive screen sizes clearly and easily

B. To create animations for buttons

C. To add colors to text

D. To write JavaScript inside Sass files

Solution

1. Step 1: Understand the role of breakpoints

   Breakpoints define screen sizes where styles change for responsiveness.

2. Step 2: Recognize how variables and maps help

   Using variables and maps organizes these breakpoints for easy updates and clarity.

3. Final Answer:

   To manage responsive screen sizes clearly and easily -> Option A

4. Quick Check:

   Breakpoint variables and maps = Manage screen sizes [OK]

Hint: Breakpoints control screen sizes; variables organize them [OK]

Common Mistakes:

• Thinking breakpoints add colors or animations
• Confusing Sass with JavaScript functionality
• Believing maps are for styling text

2. Which of the following is the correct way to define a breakpoint map in Sass?

easy

A. $breakpoints = {small: 480px, medium: 768px, large: 1024px};

B. $breakpoints: (small: 480px, medium: 768px, large: 1024px);

C. breakpoints: [small: 480px, medium: 768px, large: 1024px];

D. $breakpoints: [small => 480px, medium => 768px, large => 1024px];

Solution

1. Step 1: Recall Sass map syntax

   Sass maps use parentheses with key: value pairs separated by commas.

2. Step 2: Check each option

   $breakpoints: (small: 480px, medium: 768px, large: 1024px); uses correct syntax with $variable: (key: value, ...); others use invalid symbols or brackets.

3. Final Answer:

   $breakpoints: (small: 480px, medium: 768px, large: 1024px); -> Option B

4. Quick Check:

   Sass map syntax = parentheses and colons [OK]

Hint: Sass maps use parentheses and colons, not brackets or equals [OK]

Common Mistakes:

• Using = instead of : for variable assignment
• Using square brackets instead of parentheses
• Using => instead of : inside maps

3. Given the Sass code:

$breakpoints: (mobile: 480px, tablet: 768px, desktop: 1024px);

.container {
  @media (min-width: map-get($breakpoints, tablet)) {
    width: 80%;
  }
}

What will be the minimum screen width for the media query?

medium

A. 768px

B. 480px

C. 1024px

D. 640px

Solution

1. Step 1: Identify the map key used

   The media query uses map-get($breakpoints, tablet), so it looks for 'tablet' key.

2. Step 2: Find the value for 'tablet'

   In the map, 'tablet' corresponds to 768px.

3. Final Answer:

   768px -> Option A

4. Quick Check:

   map-get($breakpoints, tablet) = 768px [OK]

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

Common Mistakes:

• Confusing keys and values in the map
• Assuming default pixel values instead of map values
• Mixing up 'mobile' and 'tablet' keys

4. What is wrong with this Sass code snippet?

$breakpoints: (small: 480px, medium: 768px);

@media (min-width: map-get($breakpoints, large)) {
  .box { width: 100%; }
}

medium

A. The variable $breakpoints is not defined

B. The map-get function is used incorrectly

C. The media query syntax is invalid

D. The key 'large' does not exist in the $breakpoints map

Solution

1. Step 1: Check keys in the $breakpoints map

   The map only has 'small' and 'medium' keys, no 'large'.

2. Step 2: Understand map-get behavior

   Using map-get with a missing key returns null, causing invalid media query.

3. Final Answer:

   The key 'large' does not exist in the $breakpoints map -> Option D

4. Quick Check:

   Missing map key causes error [OK]

Hint: Verify map keys before using map-get [OK]

Common Mistakes:

• Assuming map-get works with any key
• Ignoring missing keys causing errors
• Thinking media query syntax is wrong

5. You want to add a new breakpoint 'xl' at 1280px to this Sass map:

$breakpoints: (sm: 480px, md: 768px, lg: 1024px);

Which is the correct way to update the map and use it in a media query for 'xl'?

hard

A. $breakpoints: append($breakpoints, (xl: 1280px));

@media (min-width: map-get($breakpoints, xl)) {
.content { padding: 2rem; }
}

B. $breakpoints: (xl: 1280px);

@media (min-width: map-get($breakpoints, xl)) {
.content { padding: 2rem; }
}

C. $breakpoints: map-merge($breakpoints, (xl: 1280px));

@media (min-width: map-get($breakpoints, xl)) {
.content { padding: 2rem; }
}

D. $breakpoints: (sm: 480px, md: 768px, lg: 1024px xl: 1280px);

@media (min-width: map-get($breakpoints, xl)) {
.content { padding: 2rem; }
}

Solution

1. Step 1: Understand how to add to existing map

   Use map-merge to add new key-value pairs without overwriting the whole map.

2. Step 2: Check each option

   append() is invalid for maps; reassigning only 'xl' overwrites and loses prior keys; missing comma between 'lg' and 'xl' causes syntax error; map-merge correctly adds 'xl' to the existing map.

3. Final Answer:

   $breakpoints: map-merge($breakpoints, (xl: 1280px)); @media (min-width: map-get($breakpoints, xl)) { .content { padding: 2rem; } } -> Option C

4. Quick Check:

   Use map-merge to add keys safely [OK]

Hint: Use map-merge to add keys without losing existing map [OK]

Common Mistakes:

• Overwriting the whole map instead of merging
• Using append which is invalid for maps
• Missing commas between key-value pairs in maps