Media query mixin patterns in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a media query mixin in Sass?

A media query mixin in Sass is a reusable block of code that helps you write media queries easily by wrapping CSS rules inside a function-like structure. It makes your styles cleaner and easier to maintain.

beginner

How do you define a simple media query mixin for a max-width of 600px?

@mixin max-width-600 { @media (max-width: 600px) { @content; } } This mixin wraps any CSS passed inside it with a max-width 600px media query.

intermediate

Why use media query mixins instead of writing media queries directly?

Using mixins avoids repeating the same media query code. It keeps your CSS DRY (Don't Repeat Yourself), makes updates easier, and improves readability by giving meaningful names to breakpoints.

intermediate

Show an example of a responsive font size using a media query mixin.

@mixin respond-to($breakpoint) { @if $breakpoint == small { @media (max-width: 600px) { @content; } } } p { font-size: 1.6rem; @include respond-to(small) { font-size: 1.2rem; } } This changes paragraph font size on small screens.

beginner

What is the role of @content inside a Sass mixin for media queries?

@content is a placeholder inside a mixin where you put the CSS rules that should be wrapped by the media query. It lets you insert custom styles when you use the mixin.

What does the @content directive do inside a Sass mixin?

A Ends the mixin

B Defines a new variable

C Starts a media query

D Inserts the CSS rules passed to the mixin

@content inserts the CSS rules you write inside the mixin call, wrapping them as needed.

Which of these is a correct way to write a media query mixin for max-width 768px?

A @mixin mq { @media (max-width: 768px) { @content; } }

B @mixin mq { max-width: 768px { @content; } }

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

D @mixin mq { @media (min-width: 768px) { @content; } }

Option A correctly uses @media with parentheses and @content inside the mixin.

Why are media query mixins helpful in Sass?

A They allow reusing media queries easily

B They make CSS slower

C They replace HTML tags

D They remove the need for CSS

Mixins help reuse media queries, making code cleaner and easier to update.

How do you include a mixin named 'mobile' in Sass?

A @use mobile;

B @import mobile;

C @include mobile;

D @mixin mobile;

You use @include followed by the mixin name to apply it.

What is the main advantage of naming media query mixins like 'small-screen' or 'tablet'?

A Makes CSS load faster

B Makes code easier to understand and maintain

C Changes HTML structure

D Removes the need for media queries

Meaningful names help you and others know what screen size the styles target.

Explain how to create and use a media query mixin in Sass for responsive design.

Think about wrapping CSS inside a function-like block that applies only on certain screen sizes.

Describe the benefits of using media query mixins compared to writing media queries directly in your Sass files.

Consider how repeating the same media query over and over can be avoided.

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