Responsive Breakpoints in Sass

December 18, 2017
Category: TIL
Tags: Sass

Up until last week, Sass breakpoints were a bit of a mystery to me. I finally figured out how they work.

First, they are programmatically generated. Define the breakpoints as a map. I use the list here.

$breakpoints: (
	xs: 512px,
	sm: 768px,
	md: 896px,
	lg: 1152px,
	xl: 1280px

Next, use a mixin and expressions to build the media queries. I use min-width. I leave it as an exercise for the reader if you wish to reverse this to use max-width instead.

@mixin breakpoint( $breakpoint ) {
    @if map-has-key( $breakpoints, $breakpoint ) {
        @media ( min-width: #{ map-get( $breakpoints, $breakpoint ) } ) {
    } @else if type_of( $breakpoint ) == number and unit( $breakpoint ) == px or unit( $breakpoint ) == em or unit( $breakpoint ) == rem {
        @media (min-width: $breakpoint ) {
    } @else {
        @warn "No value could be retrieved from `#{$breakpoint}`. "
               + "It is either not defined in the `$breakpoints` map, or it is an invalid number of px, em, or rem.";

To use, define your breakpoint styles using @import. Here is an example defining H1 font sizes at three different breakpoints:

h1 {
		text-transform: capitalize;
		@include breakpoint(xs) {
				font-size: 2.2em;
		@include breakpoint(sm) {
				font-size: 2.7em;
		@include breakpoint(xl) {
				font-size: 3em;

Find this post useful?

Buy me a coffeeBuy me a coffee