Breakpoint variables and maps in SASS

Introduction

Breakpoint variables and maps help you manage screen sizes easily. They let you change styles for different devices without repeating numbers.

You want your website to look good on phones, tablets, and desktops.

You need to change font sizes or layouts at certain screen widths.

You want to keep all your screen size values in one place for easy updates.

You are building a responsive design and want to avoid hardcoding numbers everywhere.

Syntax

SASS

$breakpoints: (
  small: 480px,
  medium: 768px,
  large: 1024px
);

@media (min-width: map-get($breakpoints, medium)) {
  // styles here
}

Use $breakpoints as a map to store screen sizes with names.

Use map-get() to get the value for a specific breakpoint.

Examples

Define breakpoints with friendly names and pixel values.

SASS

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

Use a breakpoint from the map to apply styles on tablets and larger screens.

SASS

@media (min-width: map-get($breakpoints, tablet)) {
  body {
    background-color: lightblue;
  }
}

Alternatively, use separate variables for each breakpoint.

SASS

$small: 480px;
$medium: 768px;
$large: 1024px;

Sample Program

This code sets a white background and normal font size by default. When the screen is at least 768px wide (medium breakpoint), the background changes to light gray and font size grows. At 1024px or wider (large breakpoint), the background becomes light green and font size grows more.

SASS

@use "sass:map";

$breakpoints: (
  small: 480px,
  medium: 768px,
  large: 1024px
);

body {
  background-color: white;
  font-size: 1rem;
}

@media (min-width: map.get($breakpoints, medium)) {
  body {
    background-color: lightgray;
    font-size: 1.2rem;
  }
}

@media (min-width: map.get($breakpoints, large)) {
  body {
    background-color: lightgreen;
    font-size: 1.4rem;
  }
}

Important Notes

Use maps to keep your breakpoints organized and easy to update.

Always use semantic names like small, medium, large instead of numbers everywhere.

Remember to import sass:map module to use map.get() in Dart Sass.

Summary

Breakpoint variables and maps help manage responsive screen sizes clearly.

Use maps with map-get() to access breakpoint values.

This makes your CSS easier to maintain and update for different devices.