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.