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; }
}Written by Jon Thomas
Related protips
6 Responses
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
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.
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
- coderwall keeps botching my code so i put a space between the
@variable here is a gist of the same thing
$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()}
}- the above looks janky so here is a gist of the same thing this second one is from The Sass Way
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
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.
@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.
nice!
