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.

Practice

1. What is the main purpose of using a responsive breakpoint mixin in Sass?

easy

A. To import external CSS files

B. To create animations for buttons

C. To define color variables

D. To write reusable media queries for different screen sizes

Solution

1. Step 1: Understand what a mixin does

   A mixin in Sass is used to group CSS rules that can be reused.

2. Step 2: Identify the role of breakpoint mixins

   Breakpoint mixins specifically help write media queries that adapt styles for different screen sizes.

3. Final Answer:

   To write reusable media queries for different screen sizes -> Option D

4. Quick Check:

   Responsive breakpoint mixins = reusable media queries [OK]

Hint: Mixins group reusable code blocks, breakpoints target screen sizes [OK]

Common Mistakes:

• Confusing mixins with animations
• Thinking mixins only define colors
• Believing mixins import files

2. Which of the following is the correct syntax to define a simple breakpoint mixin for a max-width of 600px in Sass?

easy

A. @mixin breakpoint($size) { @media (max-width: $size) { @content; } }

B. @mixin breakpoint(max-width: 600px) { @media (max-width: 600px) { @content; } }

C. @mixin breakpoint { @media (max-width: 600px) { @content; } }

D. @mixin breakpoint { @media max-width: 600px { @content; } }

Solution

1. Step 1: Review basic mixin syntax

   A mixin is defined with @mixin name { ... } and can include @media queries.

2. Step 2: Check the media query syntax

   The correct media query syntax requires parentheses around conditions, like (max-width: 600px).

3. Final Answer:

   @mixin breakpoint { @media (max-width: 600px) { @content; } } -> Option C

4. Quick Check:

   Mixin with @media (max-width: 600px) = correct syntax [OK]

Hint: Use parentheses in media queries and @content inside mixin [OK]

Common Mistakes:

• Omitting parentheses in media queries
• Trying to pass parameters without defining them
• Incorrect media query syntax without parentheses

3. Given this Sass code, what CSS will be generated?

@mixin respond-to-mobile {
  @media (max-width: 480px) {
    @content;
  }
}

.container {
  width: 100%;
  @include respond-to-mobile {
    width: 90%;
  }
}

medium

A. .container { width: 100%; } @media (max-width: 480px) { .container { width: 90%; } }

B. .container { width: 90%; } @media (max-width: 480px) { .container { width: 100%; } }

C. .container { width: 100%; width: 90%; } @media (max-width: 480px) { }

D. @media (max-width: 480px) { .container { width: 90%; } } .container { width: 100%; }

Solution

1. Step 1: Understand the mixin usage

   The mixin wraps the included styles inside a media query for max-width 480px.

2. Step 2: Translate Sass to CSS

   The container has width 100% normally, and inside the media query, width changes to 90%.

3. Final Answer:

   .container { width: 100%; } @media (max-width: 480px) { .container { width: 90%; } } -> Option A

4. Quick Check:

   Normal styles + media query override = .container { width: 100%; } @media (max-width: 480px) { .container { width: 90%; } } [OK]

Hint: Mixin content goes inside media query, base styles outside [OK]

Common Mistakes:

• Swapping widths inside and outside media query
• Putting media query before base styles
• Forgetting to nest styles inside media query

4. Identify the error in this Sass breakpoint mixin and fix it:

@mixin breakpoint($size) {
  @media max-width: $size {
    @content;
  }
}

medium

A. Missing parentheses around media query condition: should be @media (max-width: $size)

B. Incorrect mixin name, should be @mixin break-point

C. Missing semicolon after @content

D. Parameters cannot be used in media queries

Solution

1. Step 1: Check media query syntax

   Media queries require parentheses around conditions, e.g., (max-width: $size).

2. Step 2: Identify the fix

   Add parentheses around max-width: $size to correct the syntax.

3. Final Answer:

   Missing parentheses around media query condition: should be @media (max-width: $size) -> Option A

4. Quick Check:

   Media queries need parentheses [OK]

Hint: Always wrap media query conditions in parentheses [OK]

Common Mistakes:

• Omitting parentheses in media queries
• Thinking parameters can't be used in media queries
• Confusing mixin naming conventions

5. You want to create a flexible breakpoint mixin that accepts a minimum width and applies styles only if the screen is wider than that. Which of the following mixin definitions correctly achieves this?

hard

A. @mixin min-width($size) { @media min-width: $size { @content; } }

B. @mixin min-width($size) { @media (min-width: $size) { @content; } }

C. @mixin min-width { @media (min-width: $size) { @content; } }

D. @mixin min-width($size) { @media (max-width: $size) { @content; } }

Solution

1. Step 1: Understand the requirement

   The mixin must accept a parameter for minimum width and use it in a media query with min-width.

2. Step 2: Check each option's syntax

   @mixin min-width($size) { @media (min-width: $size) { @content; } } correctly defines a parameter and uses parentheses in the media query with min-width.

3. Step 3: Identify incorrect options

   @mixin min-width($size) { @media min-width: $size { @content; } } misses parentheses, @mixin min-width { @media (min-width: $size) { @content; } } lacks parameter, @mixin min-width($size) { @media (max-width: $size) { @content; } } uses max-width instead of min-width.

4. Final Answer:

   @mixin min-width($size) { @media (min-width: $size) { @content; } } -> Option B

5. Quick Check:

   Parameter + (min-width: $size) + @content = @mixin min-width($size) { @media (min-width: $size) { @content; } } [OK]

Hint: Use parentheses and pass parameter for min-width media query [OK]

Common Mistakes:

• Forgetting parentheses in media query
• Not defining parameter in mixin
• Using max-width instead of min-width