Responsive breakpoint mixin patterns in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding breakpoint mixin usage

Given this Sass mixin for a responsive breakpoint:

@mixin respond-to($breakpoint) {
  @if $breakpoint == small {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == medium {
    @media (min-width: 601px) and (max-width: 1024px) { @content; }
  } @else if $breakpoint == large {
    @media (min-width: 1025px) { @content; }
  }
}

What CSS will be generated by this Sass code?

.box {
  width: 100%;
  @include respond-to(medium) {
    width: 50%;
  }
}

SASS

@mixin respond-to($breakpoint) {
  @if $breakpoint == small {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == medium {
    @media (min-width: 601px) and (max-width: 1024px) { @content; }
  } @else if $breakpoint == large {
    @media (min-width: 1025px) { @content; }
  }
}

.box {
  width: 100%;
  @include respond-to(medium) {
    width: 50%;
  }
}

A

.box {
  width: 100%;
}
@media (min-width: 601px) and (max-width: 1024px) {
  .box {
    width: 50%;
  }
}

B

.box {
  width: 100%;
  width: 50%;
}

C

@media (max-width: 600px) {
  .box {
    width: 50%;
  }
}

D

.box {
  width: 50%;
}

💡 Hint

Look at which media query matches the 'medium' breakpoint in the mixin.

The mixin wraps the content inside a media query for the 'medium' breakpoint, which is between 601px and 1024px. The base width is 100%, and inside that media query, width changes to 50%.

📝 Syntax

intermediate

Fix the syntax error in this breakpoint mixin call

Which option correctly fixes the syntax error in this Sass code?

@mixin breakpoint($size) {
  @if $size == mobile {
    @media (max-width: 480px) { @content; }
  } @else if $size == tablet {
    @media (min-width: 481px) and (max-width: 768px) { @content; }
  }
}

.container {
  @include breakpoint mobile {
    padding: 1rem;
  }
}

SASS

@mixin breakpoint($size) {
  @if $size == mobile {
    @media (max-width: 480px) { @content; }
  } @else if $size == tablet {
    @media (min-width: 481px) and (max-width: 768px) { @content; }
  }
}

.container {
  @include breakpoint mobile {
    padding: 1rem;
  }
}

A

@include breakpoint('mobile') {
  padding: 1rem;
}

B

@include breakpoint($mobile) {
  padding: 1rem;
}

C

@include breakpoint mobile {
  padding: 1rem;
}

D

@include breakpoint(mobile) {
  padding: 1rem;
}

💡 Hint

Mixin arguments must be enclosed in parentheses without quotes if they are identifiers.

Sass mixin arguments require parentheses. Since 'mobile' is a variable-like identifier, it should be passed without quotes but inside parentheses.

❓ selector

advanced

Which selector is targeted inside this breakpoint mixin?

Consider this Sass code:

@mixin respond($bp) {
  @if $bp == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

nav {
  color: black;
  @include respond(desktop) {
    color: blue;
  }
}

What CSS selector will have the color blue inside the media query?

SASS

@mixin respond($bp) {
  @if $bp == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

nav {
  color: black;
  @include respond(desktop) {
    color: blue;
  }
}

A nav

B .nav

C *

D #nav

💡 Hint

Look at the selector used before the mixin call.

The mixin wraps the content inside a media query but does not change the selector. The selector remains 'nav'.

❓ layout

advanced

What layout change happens at this breakpoint?

Given this Sass code:

@mixin breakpoint($size) {
  @if $size == mobile {
    @media (max-width: 600px) { @content; }
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  @include breakpoint(mobile) {
    grid-template-columns: 1fr;
  }
}

What will the grid layout look like on a screen 500px wide?

SASS

@mixin breakpoint($size) {
  @if $size == mobile {
    @media (max-width: 600px) { @content; }
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  @include breakpoint(mobile) {
    grid-template-columns: 1fr;
  }
}

A A four column grid with equal width columns

B A single column grid with all items stacked vertically

C A two column grid with uneven column widths

D No grid layout applied

💡 Hint

Check the media query for max-width 600px and the grid-template-columns inside it.

On screens 600px or less, the grid changes to one column (1fr), stacking items vertically. Otherwise, it uses four equal columns.

❓ accessibility

expert

Accessibility impact of breakpoint mixin usage

You use a breakpoint mixin to hide a navigation menu on small screens:

@mixin hide-on-small {
  @media (max-width: 600px) {
    display: none;
  }
}

nav {
  @include hide-on-small;
}

What is a potential accessibility issue with this approach?

SASS

@mixin hide-on-small {
  @media (max-width: 600px) {
    display: none;
  }
}

nav {
  @include hide-on-small;
}

A The nav remains visible on all screen sizes, so no issue

B The nav is completely removed from the DOM, so keyboard users lose access

C Using display:none hides content visually and from assistive tech, possibly removing keyboard access

D Screen readers may still read the hidden nav, causing confusion

💡 Hint

Consider how display:none affects both visual and assistive technologies.

display:none hides content visually and from screen readers, so keyboard and screen reader users cannot access the nav. Better approaches use aria attributes or off-screen positioning.