Breakpoint variables and maps in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a breakpoint in responsive web design?

A breakpoint is a specific screen width where the website layout changes to look better on different devices like phones, tablets, or desktops.

beginner

How do you define a breakpoint variable in Sass?

You create a variable with a name and assign it a screen width value, for example: $mobile: 480px; This helps reuse the value easily.

intermediate

What is a Sass map and how is it useful for breakpoints?

A Sass map is like a list of key-value pairs. For breakpoints, it stores multiple screen sizes with names, making it easy to manage and update all breakpoints in one place.

beginner

Example: How to write a Sass map for breakpoints?

You write: $breakpoints: (mobile: 480px, tablet: 768px, desktop: 1024px); This groups all breakpoints in one variable.

intermediate

Why use breakpoint maps instead of separate variables?

Breakpoint maps keep your code organized and make it easier to add or change breakpoints without hunting for many variables scattered in your code.

What does this Sass code do?
$mobile: 480px;

A Defines a breakpoint variable for mobile screen width

B Creates a CSS class named mobile

C Sets the font size to 480 pixels

D Imports a mobile stylesheet

This code defines a variable named $mobile with the value 480px, usually used as a breakpoint.

Which Sass structure stores multiple breakpoint values with names?

A Map

B List

C Function

D Mixin

A Sass map stores key-value pairs, perfect for naming breakpoints with their sizes.

How would you access the tablet breakpoint from this map?
$breakpoints: (mobile: 480px, tablet: 768px);

A $breakpoints[tablet]

B $tablet

C map-get($breakpoints, tablet)

D get-map($breakpoints, tablet)

Use the Sass function map-get to retrieve values from a map.

Why are breakpoint variables helpful in CSS?

A They make code shorter but harder to read

B They allow easy reuse and consistent screen size values

C They automatically change font sizes

D They replace media queries

Variables let you reuse values and keep your breakpoints consistent.

What is the main advantage of using a breakpoint map over separate variables?

A Maps are faster to compile

B Maps reduce CSS file size

C Maps automatically create media queries

D Maps allow grouping and easier management of breakpoints

Grouping breakpoints in a map helps organize and update them easily.

Explain what breakpoint variables and maps are in Sass and why they are useful.

Think about how you manage screen sizes in your styles.

Describe how you would use a breakpoint map in a Sass media query.

Remember the syntax for map-get and media queries.

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