Media query mixin patterns in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS mixin usage?

Given the following SASS code, what CSS will be generated?

@mixin respond-to($breakpoint) {
  @if $breakpoint == small {
    @media (max-width: 600px) {
      @content;
    }
  }
}

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

SASS

@mixin respond-to($breakpoint) {
  @if $breakpoint == small {
    @media (max-width: 600px) {
      @content;
    }
  }
}

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

A

.box {
  width: 100%;
}

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

B

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

C

.box {
  width: 50%;
}

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

D

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

💡 Hint

Look at how the mixin wraps the content inside a media query only for the 'small' breakpoint.

The mixin checks if the breakpoint is 'small' and wraps the included styles inside a media query for max-width 600px. The base .box width is 100%, and inside the media query it changes to 50%.

🧠 Conceptual

intermediate

Which option correctly explains the benefit of using media query mixins?

Why do developers use media query mixins in SASS instead of writing media queries directly in CSS?

A They replace the need for CSS variables in responsive design.

B They automatically optimize media queries for all browsers without extra code.

C They convert media queries into JavaScript for dynamic resizing.

D They allow reusing media query logic and keep code DRY (Don't Repeat Yourself).

💡 Hint

Think about how mixins help avoid repeating the same code.

Media query mixins let you write the media query condition once and reuse it multiple times, making your code cleaner and easier to maintain.

❓ selector

advanced

What CSS selector is generated by this nested media query mixin usage?

Consider this SASS code:

@mixin respond-to($breakpoint) {
  @if $breakpoint == medium {
    @media (min-width: 601px) and (max-width: 900px) {
      @content;
    }
  }
}

.container {
  background: white;
  .item {
    color: black;
    @include respond-to(medium) {
      color: red;
    }
  }
}

What is the CSS selector for the color red style?

SASS

@mixin respond-to($breakpoint) {
  @if $breakpoint == medium {
    @media (min-width: 601px) and (max-width: 900px) {
      @content;
    }
  }
}

.container {
  background: white;
  .item {
    color: black;
    @include respond-to(medium) {
      color: red;
    }
  }
}

A

.item {
  color: red;
}

B

.container {
  .item {
    @media (min-width: 601px) and (max-width: 900px) {
      color: red;
    }
  }
}

C

@media (min-width: 601px) and (max-width: 900px) {
  .container .item {
    color: red;
  }
}

D

.container .item {
  color: red;
  @media (min-width: 601px) and (max-width: 900px) {
  }
}

💡 Hint

Remember how nested selectors and media queries compile in SASS.

The nested .item inside .container becomes .container .item in CSS. The media query wraps the entire selector with the styles inside it.

❓ layout

advanced

Which media query mixin usage correctly changes layout on large screens?

Given this mixin:

@mixin respond-to($breakpoint) {
  @if $breakpoint == large {
    @media (min-width: 901px) {
      @content;
    }
  }
}

Which SASS snippet will make a grid container have 4 columns only on large screens?

SASS

@mixin respond-to($breakpoint) {
  @if $breakpoint == large {
    @media (min-width: 901px) {
      @content;
    }
  }
}

A

.grid {
  display: grid;
  @include respond-to(large) {
    grid-template-columns: repeat(4, 1fr);
  }
  grid-template-columns: repeat(2, 1fr);
}

B

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  @include respond-to(large) {
    grid-template-columns: repeat(4, 1fr);
  }
}

C

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  @include respond-to(large) {
    grid-template-columns: repeat(2, 1fr);
  }
}

D

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
}

💡 Hint

The base style applies to all screens, the mixin overrides it only on large screens.

Option B sets 2 columns by default and changes to 4 columns inside the large screen media query. Others either override incorrectly or do not apply the media query properly.

❓ accessibility

expert

How can media query mixins improve accessibility for users with reduced motion preferences?

Consider this SASS mixin:

@mixin prefers-reduced-motion {
  @media (prefers-reduced-motion: reduce) {
    @content;
  }
}

Which usage best respects users who want less motion animations?

SASS

@mixin prefers-reduced-motion {
  @media (prefers-reduced-motion: reduce) {
    @content;
  }
}

A

.animation {
  animation: spin 2s linear infinite;
  @include prefers-reduced-motion {
    animation: none;
  }
}

B

.animation {
  animation: spin 2s linear infinite;
  @include prefers-reduced-motion {
    animation: spin 1s linear infinite;
  }
}

C

.animation {
  animation: spin 2s linear infinite;
  @media (prefers-reduced-motion: no-preference) {
    animation: none;
  }
}

D

.animation {
  animation: spin 2s linear infinite;
  animation-play-state: paused;
}

💡 Hint

Think about how to disable animations for users who prefer reduced motion.

Option A disables the animation inside the prefers-reduced-motion media query, respecting user preferences. Others either do not disable or incorrectly apply styles.