Breakpoint variables and maps in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding breakpoint maps in Sass

Given the following Sass map for breakpoints, what is the value of $breakpoints["tablet"]?

SASS

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

A 768px

B 320px

C 1024px

D null

💡 Hint

Look at the key named "tablet" in the map.

In Sass maps, you access values by their keys. The key "tablet" corresponds to 768px.

📝 Syntax

intermediate

Correct syntax for defining breakpoint variables

Which of the following Sass code snippets correctly defines a map named $breakpoints with keys "small" and "large" and values 480px and 1200px respectively?

A $breakpoints = (small: 480px, large: 1200px);

B $breakpoints: ["small" => 480px, "large" => 1200px];

C $breakpoints: ("small": 480px, "large": 1200px);

D $breakpoints: {"small": 480px, "large": 1200px};

💡 Hint

Sass maps use parentheses and colons for key-value pairs.

Sass maps are defined with parentheses and key-value pairs separated by colons. Option C uses correct syntax.

❓ selector

advanced

Using breakpoint maps in media queries

Given the breakpoint map below, which Sass code correctly applies styles only for screens wider than the "desktop" breakpoint?

SASS

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

A @media (min-width: $breakpoints["desktop"]) { .container { width: 100%; } }

B @media (min-width: map-get($breakpoints, "desktop")) { .container { width: 100%; } }

C @media (min-width: $breakpoints.desktop) { .container { width: 100%; } }

D @media (min-width: map-get($breakpoints.desktop)) { .container { width: 100%; } }

💡 Hint

Use the Sass function to get values from maps.

The correct way to get a value from a Sass map is using map-get(map, key). Option B uses this correctly.

❓ layout

advanced

Responsive layout with breakpoint variables

You want a container to have 100% width on mobile and tablet, but max-width 1200px on desktop and larger. Which Sass code using breakpoint variables achieves this?

SASS

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

A .container { width: 100%; @media (max-width: map-get($breakpoints, "desktop")) { max-width: 1200px; } }

B .container { max-width: 1200px; @media (max-width: map-get($breakpoints, "tablet")) { width: 100%; } }

C .container { width: 100%; max-width: 1200px; }

D .container { width: 100%; @media (min-width: map-get($breakpoints, "desktop")) { max-width: 1200px; } }

💡 Hint

Use min-width media query for desktop and larger.

Option D sets width 100% by default and applies max-width 1200px only when screen is at least desktop size.

❓ accessibility

expert

Ensuring accessible font scaling with breakpoint maps

You have a Sass map of breakpoints and want to scale font sizes responsively for accessibility. Which approach below correctly uses breakpoint maps and relative units to improve accessibility?

SASS

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

A body { font-size: 1rem; @media (min-width: map-get($breakpoints, "tablet")) { font-size: 1.125rem; } @media (min-width: map-get($breakpoints, "desktop")) { font-size: 1.25rem; } }

B body { font-size: 16px; @media (min-width: map-get($breakpoints, "tablet")) { font-size: 18px; } @media (min-width: map-get($breakpoints, "desktop")) { font-size: 20px; } }

C body { font-size: 1em; @media (min-width: map-get($breakpoints, "desktop")) { font-size: 2em; } }

D body { font-size: 100%; @media (max-width: map-get($breakpoints, "tablet")) { font-size: 90%; } }

💡 Hint

Use relative units like rem for better accessibility.

Option A uses rem units and increases font size at larger breakpoints, which respects user settings and improves accessibility.