Responsive breakpoint mixin patterns in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a mixin named 'respond' that takes one parameter.

SASS

@mixin [1]($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

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

Arespond

Bbreakpoint

Cmedia

Dscreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@mixin media' instead of '@mixin respond'.

Forgetting to name the mixin.

The mixin name should be 'respond' to match the usage pattern for responsive breakpoints.

2fill in blank

medium

Complete the code to use the 'respond' mixin with a breakpoint variable.

SASS

.container {
  @include respond([1]) {
    width: 80%;
  }
}

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

A768px

Btablet

C$screen

D$tablet

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string like '768px' directly instead of a variable.

Omitting the '$' sign before the variable name.

The mixin expects a variable representing the breakpoint, so '$tablet' is correct.

3fill in blank

hard

Fix the error in the mixin to correctly apply styles for max-width breakpoints.

SASS

@mixin respond-max($breakpoint) {
  @media ([1]-width: $breakpoint) {
    @content;
  }
}

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

Amax-

Bmax

Cmin

Dmin-

Attempts:

3 left

💡 Hint

Common Mistakes

Writing 'max-width' as 'max-width' but with a dash misplaced.

Using 'min-width' when the mixin is for max-width.

The correct media feature for maximum width is 'max-width'.

4fill in blank

hard

Fill both blanks to create a mixin that applies styles between two breakpoints.

SASS

@mixin respond-between($min, $max) {
  @media ([1]-width: $min) and ([2]-width: $max) {
    @content;
  }
}

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

Amin

Bmax

Cmin-

Dmax-

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping 'min' and 'max' in the media query.

Adding extra dashes in the media feature names.

The media query should use 'min-width' for the lower limit and 'max-width' for the upper limit.

5fill in blank

hard

Fill all three blanks to create a map of breakpoints and use it in a mixin.

SASS

$breakpoints: (
  mobile: [1],
  tablet: [2],
  desktop: [3]
);

@mixin respond-map($device) {
  @media (min-width: map-get($breakpoints, $device)) {
    @content;
  }
}

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

A320px

B768px

C1024px

D1280px

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of breakpoints.

Using desktop width smaller than tablet width.

The map defines common device widths: mobile at 320px, tablet at 768px, and desktop at 1024px.