Breakpoint variables and maps in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a breakpoint variable for mobile screens.

SASS

$mobile: [1];

Drag options to blanks, or click blank then click option'

A1024px

B480px

C768px

D1200px

Attempts:

3 left

💡 Hint

Common Mistakes

Using a desktop breakpoint value like 1024px for mobile.

Forgetting to add the unit 'px'.

The variable $mobile is set to 480px, which is a common width for mobile devices.

2fill in blank

medium

Complete the code to create a map of breakpoints with keys for mobile and tablet.

SASS

$breakpoints: (mobile: [1], tablet: 768px);

Drag options to blanks, or click blank then click option'

A320px

B1024px

C480px

D600px

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping mobile and tablet values.

Using a value without units.

The mobile key in the map is set to 480px, matching the mobile breakpoint.

3fill in blank

hard

Fix the error in the map definition by completing the missing value.

SASS

$breakpoints: (mobile: 480px, tablet: [1]);

Drag options to blanks, or click blank then click option'

A768px

B768

C1024

D1024px

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the 'px' unit causes errors.

Using a number without units in a map for breakpoints.

The value must include the unit px to be valid in Sass maps.

4fill in blank

hard

Fill both blanks to add a desktop breakpoint and use the map to get the tablet size.

SASS

$breakpoints: (mobile: 480px, tablet: 768px, desktop: [1]);
$tablet-size: map-get($breakpoints, [2]);

Drag options to blanks, or click blank then click option'

A1024px

Btablet

Cdesktop

D1280px

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong key name in map-get.

Forgetting units for the desktop breakpoint.

The desktop breakpoint is set to 1024px. The map-get function retrieves the value for the tablet key.

5fill in blank

hard

Fill all three blanks to define breakpoints and use them in a media query.

SASS

@media (min-width: [1]) {
  body {
    font-size: [2];
  }
}
$breakpoints: (mobile: 480px, tablet: 768px, desktop: [3]);

Drag options to blanks, or click blank then click option'

A768px

B1.2rem

C1024px

D1rem

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up breakpoint values and font sizes.

Forgetting units in media queries or font sizes.

The media query uses the tablet breakpoint 768px for minimum width. Inside, the font size is set to 1.2rem. The desktop breakpoint is defined as 1024px.