Media query 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 breakpoint.

SASS

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

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

Arespond

Bmedia

Cscreen

Dbreakpoint

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@media' instead of '@mixin' to define a mixin.

Naming the mixin 'media' which is a CSS keyword.

Forgetting to include '@content' inside the mixin.

The mixin is named 'respond' to indicate it handles responsive breakpoints.

2fill in blank

medium

Complete the code to use the respond mixin with a max-width of 600px.

SASS

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

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

Amax-width: 600px

Bmin-width: 600px

C600

D600px

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'max-width: 600px' which is not just a value.

Passing '600' without units.

Using 'min-width' instead of 'max-width' for this mixin.

The mixin expects a value like '600px' for the breakpoint parameter.

3fill in blank

hard

Fix the error in the mixin call by completing the blank with the correct syntax.

SASS

@include respond([1]) {
  font-size: 1.2rem;
}

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

A600

B"600px"

C600px

Dmax-width: 600px

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the value.

Passing the full media query condition instead of just the size.

Omitting units.

The parameter should be a value with units, without quotes or extra text.

4fill in blank

hard

Fill both blanks to create a mixin named respond that uses a min-width media query.

SASS

@mixin [1]($breakpoint) {
  @media only screen and ([2]-width: $breakpoint) {
    @content;
  }
}

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

Arespond

Bmax

Cmin

Dmedia

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'max' instead of 'min' for min-width queries.

Naming the mixin 'media' which is a CSS keyword.

The mixin is named 'respond' and uses 'min-width' for the media query.

5fill in blank

hard

Fill both blanks to create a map of breakpoints and use the respond mixin with the 'tablet' size.

SASS

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

.container {
  @include respond($breakpoints[2]);
  padding: 1rem;
}

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

A768px

B["tablet"]

C[tablet]

D(tablet)

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of square brackets to access map values.

Not quoting the key 'tablet' inside brackets.

Using the wrong breakpoint value.

The 'tablet' breakpoint is 768px. To access it from the map, use square brackets with the key in quotes: $breakpoints["tablet"].