Responsive breakpoint mixin patterns in SASS - Mini Project: Build & Apply

Responsive Breakpoint Mixin Patterns with Sass

📖 Scenario: You are building a simple webpage that needs to look good on phones, tablets, and desktops. To do this, you will create a Sass mixin that helps you write styles that change at different screen widths (called breakpoints).

🎯 Goal: Create a Sass mixin called respond-to that accepts a breakpoint name and applies styles only when the screen width matches that breakpoint. Use this mixin to change the background color of a .box element for phone, tablet, and desktop sizes.

📋 What You'll Learn

Create a Sass map called $breakpoints with keys phone, tablet, and desktop and values 480px, 768px, and 1024px respectively.

Create a mixin called respond-to that takes a parameter $breakpoint and uses the $breakpoints map to apply a media query with min-width.

Use the respond-to mixin to set the background color of the .box class to lightblue on phones, lightgreen on tablets, and lightcoral on desktops.

Ensure the Sass code compiles correctly and the styles apply responsively in the browser.

💡 Why This Matters

🌍 Real World

Responsive design is essential for websites to look good on all devices. Using Sass mixins for breakpoints helps developers write cleaner and reusable code.

💼 Career

Front-end developers often use Sass and responsive design techniques to build flexible, user-friendly websites that work well on phones, tablets, and desktops.

1

Create the breakpoints map

Create a Sass map called $breakpoints with these exact entries: phone: 480px, tablet: 768px, and desktop: 1024px.

SASS

# Create the $breakpoints map with phone, tablet, and desktop keys
# Your code here

Hint

Use parentheses ( ) to create a Sass map. Separate keys and values with a colon and entries with commas.

2

Create the respond-to mixin

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

SASS

$breakpoints: (
  phone: 480px,
  tablet: 768px,
  desktop: 1024px
);

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

Hint

Use @mixin to create a mixin and @content to insert styles inside the media query.

3

Use the mixin for the .box background colors

Write styles for the .box class. Use the respond-to mixin three times with phone, tablet, and desktop to set the background colors to lightblue, lightgreen, and lightcoral respectively.

SASS

$breakpoints: (
  phone: 480px,
  tablet: 768px,
  desktop: 1024px
);

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

// Add .box styles using respond-to mixin
# Your code here

Hint

Use @include respond-to(breakpoint) inside the .box block to apply styles for each breakpoint.

4

Add base styles and complete the Sass file

Add a base style for the .box class that sets width to 100%, height to 10rem, and transition for background color changes. Keep the responsive background colors inside the respond-to mixin calls.

SASS

$breakpoints: (
  phone: 480px,
  tablet: 768px,
  desktop: 1024px
);

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

.box {
  // Add base styles here
  # Your code here

  @include respond-to(phone) {
    background-color: lightblue;
  }
  @include respond-to(tablet) {
    background-color: lightgreen;
  }
  @include respond-to(desktop) {
    background-color: lightcoral;
  }
}

Hint

Set the base size and smooth color change for the box outside the media queries.