Media query mixin patterns in SASS - Mini Project: Build & Apply

Responsive Card Layout with Media Query Mixins

📖 Scenario: You are building a simple card layout for a website. The cards should look good on phones, tablets, and desktops. To make your CSS easier to manage, you will create a media query mixin in Sass. This mixin will help you write responsive styles quickly and clearly.

🎯 Goal: Create a Sass mixin called respond-to that accepts a device type (phone, tablet, or desktop) and applies the correct media query. Use this mixin to make the card background color change on different screen sizes.

📋 What You'll Learn

Create a Sass map called breakpoints with keys phone, tablet, and desktop and their respective max-width values.

Create a mixin called respond-to that takes a $device parameter and applies a media query using the breakpoints map.

Use the respond-to mixin to change the card background color for each device type.

Write semantic and clean Sass code that compiles to valid CSS.

💡 Why This Matters

🌍 Real World

Web developers often need to make websites look good on many devices. Using Sass mixins for media queries saves time and reduces mistakes.

💼 Career

Knowing how to write reusable media query mixins is a valuable skill for front-end developers working on responsive designs.

1

Create the breakpoints map

Create a Sass map called breakpoints with these exact entries: phone: 600px, tablet: 900px, and desktop: 1200px.

SASS

// Create the breakpoints map with phone, tablet, and desktop sizes
// Your code here

Hint

Use parentheses ( ) to create a Sass map. Separate each key-value pair with a comma.

2

Create the respond-to mixin

Create a mixin called respond-to that takes a parameter $device. Inside, write a media query using @media (max-width: map-get($breakpoints, $device)) and include @content inside the media query block.

SASS

$breakpoints: (
  phone: 600px,
  tablet: 900px,
  desktop: 1200px
);

// Create the respond-to mixin here
// Your code here

Hint

Use @mixin to define the mixin and @content to include nested styles inside the media query.

3

Add base styles for the card

Create a CSS class .card with a fixed width of 20rem, padding of 1rem, and a background color of #eee.

SASS

$breakpoints: (
  phone: 600px,
  tablet: 900px,
  desktop: 1200px
);

@mixin respond-to($device) {
  @media (max-width: map-get($breakpoints, $device)) {
    @content;
  }
}

// Add base styles for .card
// Your code here

Hint

Use rem units for size and write the styles inside .card { }.

4

Use the respond-to mixin to change background colors

Inside the .card class, use the @include respond-to(desktop) mixin to set background color to #99ccff. Then use @include respond-to(tablet) to set background color to #b3d7ff. Finally, use @include respond-to(phone) to set background color to #cce5ff.

SASS

$breakpoints: (
  phone: 600px,
  tablet: 900px,
  desktop: 1200px
);

@mixin respond-to($device) {
  @media (max-width: map-get($breakpoints, $device)) {
    @content;
  }
}

.card {
  width: 20rem;
  padding: 1rem;
  background-color: #eee;

  // Use respond-to mixin to change background colors
  // Your code here
}

Hint

Use @include respond-to(device) with curly braces to add styles inside the media query.

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