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"].

Practice

1. What is the main benefit of using a media query mixin in Sass?

easy

A. You write the media query once and reuse it multiple times

B. It automatically fixes all layout bugs

C. It converts Sass to JavaScript

D. It removes the need for CSS altogether

Solution

1. Step 1: Understand what a mixin does

   A mixin lets you write reusable code blocks in Sass.

2. Step 2: Apply this to media queries

   Using a media query mixin means you write the query once and reuse it for different styles.

3. Final Answer:

   You write the media query once and reuse it multiple times -> Option A

4. Quick Check:

   Reusable media queries = A [OK]

Hint: Mixins save repeating code by reusing media queries [OK]

Common Mistakes:

• Thinking mixins fix layout bugs automatically
• Confusing Sass with JavaScript
• Believing mixins remove CSS need

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

easy

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

B. @media respond { max-width: 600px; } @mixin { content; }

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

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

Solution

1. Step 1: Recall Sass mixin syntax

   A mixin is defined with @mixin name { ... } and uses @content to insert styles.

2. Step 2: Check media query inside mixin

   The media query should wrap @content inside the mixin block.

3. Final Answer:

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

4. Quick Check:

   Mixin with media and @content = B [OK]

Hint: Use @mixin name { @media (...) { @content; } } for media queries [OK]

Common Mistakes:

• Placing @media outside the mixin
• Wrong order of @mixin and @media
• Missing @content inside media query

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

@mixin phone { @media (max-width: 480px) { @content; } }
.box {
  width: 100%;
  @include phone {
    width: 50%;
  }
}

medium

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

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

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

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

Solution

1. Step 1: Understand mixin usage

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

2. Step 2: Translate Sass to CSS

   .box has width 100% normally, and inside the media query it changes to width 50%.

3. Final Answer:

   .box { width: 100%; } @media (max-width: 480px) { .box { width: 50%; } } -> Option D

4. Quick Check:

   Normal style + media query override = D [OK]

Hint: Mixin wraps included styles inside media query block [OK]

Common Mistakes:

• Swapping widths inside and outside media query
• Putting media query styles outside the block
• Combining widths without media query

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

@mixin tablet {
  @media max-width: 768px {
    @content;
  }
}

medium

A. Mixin name 'tablet' is invalid; must start with a capital letter

B. @content should be outside @media block

C. Missing parentheses around max-width value in @media; fix with @media (max-width: 768px)

D. @media cannot be used inside mixins

Solution

1. Step 1: Check @media syntax

   The media query must have parentheses around conditions, like (max-width: 768px).

2. Step 2: Correct the syntax

   Change @media max-width: 768px to @media (max-width: 768px) to fix the error.

3. Final Answer:

   Missing parentheses around max-width value in @media; fix with @media (max-width: 768px) -> Option C

4. Quick Check:

   @media needs parentheses = A [OK]

Hint: Always wrap media conditions in parentheses [OK]

Common Mistakes:

• Omitting parentheses in @media
• Placing @content outside media block
• Thinking mixin names must be capitalized

5. You want to create a Sass mixin that accepts a max-width value as a parameter and applies styles inside that media query. Which of these mixins correctly implements this pattern?

hard

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

B. @mixin respond($max) { @media (max-width: $max) { @content; } }

C. @mixin respond { @media (max-width: $max) { @content; } }

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

Solution

1. Step 1: Check parameter usage in mixin

   The mixin must accept a parameter $max and use it inside parentheses in the media query.

2. Step 2: Verify correct media query syntax

   @media (max-width: $max) is correct; missing parentheses or wrong media feature cause errors.

3. Final Answer:

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

4. Quick Check:

   Parameterized media query with parentheses = C [OK]

Hint: Use parameters with parentheses in media queries [OK]

Common Mistakes:

• Missing parentheses around media condition
• Using min-width instead of max-width by mistake
• Not passing parameter to mixin