Breakpoint variables and maps in SASS - Mini Project: Build & Apply

Responsive Layout with Breakpoint Variables and Maps in Sass

📖 Scenario: You are building a simple responsive webpage layout. You want to use Sass to manage your breakpoints easily so the layout changes smoothly on different screen sizes.

🎯 Goal: Create a Sass file that defines breakpoint variables inside a map, then use those breakpoints to write media queries that change the background color of a container for mobile, tablet, and desktop screens.

📋 What You'll Learn

Define a Sass map called $breakpoints with keys mobile, tablet, and desktop and their exact pixel values.

Create a variable $base-color with the value #f0f0f0.

Use the @media rule with the breakpoint values from the map to change the container background color for each screen size.

Write valid Sass code that compiles to CSS with correct media queries.

💡 Why This Matters

🌍 Real World

Using breakpoint maps in Sass helps developers manage responsive designs easily and consistently across large projects.

💼 Career

Front-end developers often use Sass maps and variables to write maintainable and scalable CSS for responsive websites.

1

Create the breakpoint map

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

SASS

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

Hint

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

2

Add a base color variable

Create a variable called $base-color and set it to the color #f0f0f0.

SASS

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

// Create $base-color variable
# Your code here

Hint

Use $base-color: #f0f0f0; to create a color variable in Sass.

3

Write media queries using the breakpoint map

Write three @media queries using the values from the $breakpoints map. Use map-get($breakpoints, mobile), map-get($breakpoints, tablet), and map-get($breakpoints, desktop) to get the pixel values. Inside each media query, set the background color of the .container class to #d0f0d0 for mobile, #f0d0d0 for tablet, and #d0d0f0 for desktop.

SASS

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

$base-color: #f0f0f0;

// Write media queries for .container background colors
# Your code here

Hint

Use @media with map-get($breakpoints, key) to access breakpoint values. Write CSS inside the media query blocks.

4

Add the base container style

Add a style for the .container class outside the media queries that sets its background color to the $base-color variable.

SASS

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

$base-color: #f0f0f0;

// Add base .container background color here
# Your code here

@media (max-width: map-get($breakpoints, mobile)) {
  .container {
    background-color: #d0f0d0;
  }
}

@media (min-width: map-get($breakpoints, tablet)) and (max-width: map-get($breakpoints, desktop)) {
  .container {
    background-color: #f0d0d0;
  }
}

@media (min-width: map-get($breakpoints, desktop)) {
  .container {
    background-color: #d0d0f0;
  }
}

Hint

Write the base style for .container before the media queries to set the default background color.