Last Updated: September 29, 2021
·
11.6K
· wjonthomas

Handy Sass mixin for creating media query breakpoints on-the-fly

I've been doing quite a bit of responsive design lately, and have found that I always need to adjust different aspects of my design at many different breakpoints, not just breakpoints for common devices. This keeps your design looking good no matter the screen size.

So, here's a Sass mixin that will will allow you to define breakpoints in your Sass code on the fly.

First, add the mixin at the top of your scss file or another included file where you're keeping your mixins.

@mixin respond-to($breakpoint) {
    @media only screen and (max-width: $breakpoint + px) { @content; }
}

Then, when you need to set breakpoints for something, just use them like this:

.my-awesome-element {
    color: red;
}

@include respond-to(648) {
    .my-awesome-element {
        color: green;
    }
}

Or you can do the following:

.my-awesome-element {
    color: red;

    @include respond-to(800) {
        color: blue;
    }

    @include respond-to(520) {
        color: gray;
    }
}

If you're doing a mobile-first approach, just change the mixin to use min-width instead of max-width.

@mixin respond-to($breakpoint) {
    @media only screen and (*min-width*: $breakpoint + px) { @content; }
}

6 Responses
Add your response

Thanks for sharing man!

Is the markdown formatting correct?
It looks weird to me,

I see this:
.my-awesome-element { color: red; } //Change text color at 648px <a href="/include">@include</a> respond-to(648) { .my-awesome-element { color: green; } } </code></pre>

Should it not be:
.my-awesome-element { color: red; } //Change text color at 648px @include respond-to(648) { .my-awesome-element { color: green; } } </code></pre>

Ps: no idea why the font is so big

over 1 year ago ·

Good catch. It didn't show like that in the preview. I figured out what the problem was, and it would be great if someone knew how to write Sass comments in markdown. I think there are some characters that need to be escaped.

The Comments above the include ("//Change text color at XXXpx") were messing up the @include statement below. Looks like yours are acting strange too. Also, for some reason "@include" is being turned into a hyperlink.

Anyway, I hope that didn't throw anyone off. It's fixed now. :) Thanks @peduarte.

over 1 year ago ·

this is fantastic here is the same with min-width , max-width , and min-device-pixel-ratio

@mixin  respond-to($breakpoint, $breakpoint2) {
     @media  only screen and (min-width: $breakpoint + px) and (max-width: $breakpoint2 + px) and (-webkit-min-device-pixel-ratio : 1.5) and (min-device-pixel-ratio : 1.5) {  @content ; }
}

here is another variation using an if statement

$break-small: 320px;
$break-large: 1024px;

 @mixin  respond-to($media) {
   @ if  $media == handhelds {  //i put a space in between the @ and all the variables so the code wouldn't get borked
     @ media  only screen and (max-width: $break-small) {  @content ; }
  }
   @ else  if $media == medium-screens {
     @ media  only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) {  @content ; }
  }
   @ else  if $media == wide-screens {
     @ media  only screen and (min-width: $break-large) {  @content ; }
  }
   @ else  if $media == retina-screens {
     @ media  only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) and (min-device-pixel-ratio: 1.5) and (-webkit-min-device-pixel-ratio: 1.5) {  @content ; }
  }
}

.profile-pic {
  float: left;
  width: 250px;
   @include  respond-to(handhelds) { width: 100% ;}
   @include  respond-to(medium-screens) { width: 125px; }
   @include  respond-to(wide-screens) { float: none; }
   @include  respond-to(retina-screens) {background-image:url()}
}

A new project on github for sass media queries that looks fantastic sass-mediaqueries github page and sass-mediaqueries website they even have a cool demo page

-thanks for the tips bro :P

over 1 year ago ·

Thanks for adding. This approach is great for projects where you know which breakpoints you want to use. Even though I don't typically use specific breakpoints, there are times when I may find myself using the same breakpoint over and over, so it can only help to extract the common ones out into a variable or something. The code you provided works well in that regard.

And, yea, the code in these editors is a little janky when it comes to CSS, Sass, etc. Hopefully they improve that a little.

over 1 year ago ·

@wjonthomas :) I agree completely.

I'm glad we could share.

I submitted a request to @coderwall to allow for a syntax color theme choice in protips. I hope that will alleviate some of the janky syntax issues.

over 1 year ago ·

nice!

over 1 year ago ·