Handling custom media queries in Sass with Twitter Bootstrap - css

Question

I have a Sass mixin for my media queries based on Twitter Bootstrap's responsive media queries:
#mixin respond-to($media) {
#if $media == handhelds {
/* Landscape phones and down */
#media (max-width: 480px) { #content; }
}
#else if $media == small {
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {#content; }
}
#else if $media == medium {
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { #content; }
}
#else if $media == large {
/* Large desktop */
#media (min-width: 1200px) { #content; }
}
#else {
#media only screen and (max-width: #{$media}px) { #content; }
}
}
And I call them throughout my SCSS file like so:
.link {
color:blue;
#include respond-to(medium) {
color: red;
}
}
However, sometimes I want to style multiple queries with the same styles. Right now I'm doing them like this:
.link {
color:blue; /* this is fine for handheld and small sizes*/
/*now I want to change the styles that are cascading to medium and large*/
#include respond-to(medium) {
color: red;
}
#include respond-to(large) {
color: red;
}
}
but I'm repeating code so I'm wondering if there is a more concise way to write it so I can target multiple queries. Something like this so I don't need to repeat my code (I know this doesn't work):
#include respond-to(medium, large) {
color: red;
}
Any suggestions on the best way to handle this?

Answer 1

A mixin like that leaves you in a position that's not very flexible, and not just because you're using px (see: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/). Simply put, you've made your mixin too specific and not very reusable for other sites.
I'm currently using a collection of 4 mixins to handle the most common media queries: min-width, max-width, between, and outside (I've sampled min-width and between below)
$output-media-width: true !default; // true = all, otherwise use a list of numeric values (eg. 320px 23em)
#mixin media-min-width($bp) {
#if type-of($output-media-width) != list {
#media (min-width: $bp) {
#content;
}
} #else {
$output-bp: find-comparable($bp, $output-media-width);
#if not comparable($output-bp, $bp) {
#debug "Output breakpoint: #{$output-bp}, Chosen minimum width: #{$bp}";
} #else if $output-bp >= $bp {
#content;
}
}
}
#mixin media-between($bp1, $bp2) {
#if type-of($output-media-width) != list {
#media (min-width: $bp1) and (max-width: make-less-than($bp2)) {
#content;
}
} #else {
$output-bp1: find-comparable($bp1, $output-media-width);
$output-bp2: find-comparable($bp2, $output-media-width);
#if not comparable($output-bp1, $bp1) or not comparable($output-bp2, $bp2) {
#debug "Output breakpoints: #{$output-bp1} and #{$output-bp2}, Chosen breakpoints: #{$bp1} and #{$bp2}";
} #else if $output-bp2 >= $bp1 and $output-bp2 < $bp2 {
#content;
}
}
}
#function find-comparable($val, $list) {
#each $item in $list {
#if comparable($val, $item) {
#return $item;
}
}
}
#function make-less-than($val) {
#return if(unit($val) == em, $val - .001, $val - 1);
}
This mixin suite lets me generate a responsive CSS file or a collection of non-responsive CSS files at any width I desire (specifically for devices that don't take kindly to media queries) just by having a variable like this at the top of my file:
$output-media-width: 800px 60em;
A list of sizes lets me use px in those rare cases where em is inappropriate (such as for dealing with images).
// Device widths
$device-x-narrow: 23em; // 320px
$device-narrow: 35em; // 480px
$device-medium: 60em; // 800px
$device-wide: 70em; // 1000px
article.event {
#mixin tableify {
// footer { display: table-row }
footer section { display: table-cell }
footer section + section { padding-left: 2em }
}
#include media-min-width($device-medium) { // 2-col layout still
#main > & { // single event view
#include tableify;
}
}
// sometimes you need a non-standard breakpoint, too...
#include media-min-width(27em) { // narrow devices
section & {
#include tableify;
}
}
#include media-max-width(27em) {
footer section.categories ul {
display: block;
padding-left: 0;
li { display: inline }
li + li { margin-left: 1em }
}
}
}

Answer 2

Despite the fact that #cimmanon answered my question before I posted that I was using Twitter Bootstrap, it had some really interesting ideas in it which I think I'll apply from now on for my Sass projects that use Twitter Bootstrap. Here is what I found worked great:
/* Responsive dimensions */
$handheld-max: 479px;
$small-min: $handheld-max + 1;
$small-max: 767px;
$medium-min: $small-max + 1;
$medium-max: 979px;
$large-min: $medium-max + 1;
$large-max: 1199px;
$xlarge: 1200;
/*Responsive query mixins */
#mixin media-above($min) {
#media (min-width: $min) { #content; }
}
#mixin media-below($max) {
#media (max-width: $max) { #content; }
}
#mixin media-between($min, $max) {
#media (min-width: $min) and (max-width: $max) { #content; }
}
and then call it in my code like so (based on my request in the question):
.link {
color: blue;
#mixin media-above($medium-min){
color: red;
}
}

Answer 3

Using bootstrap-sass variables, I defined such mixins in SASS syntax:
=media-width-below($max)
#media (max-width: $max)
#content
=media-width-between($min, $max)
#media (min-width: $min), (max-width: $max)
#content
=media-width-above($min)
#media (min-width: $min)
#content
=media-xs
+media-width-above($screen-xs-min)
#content
=media-sm
+media-width-above($screen-sm-min)
#content
=media-md
+media-width-above($screen-md-min)
#content
=media-lg
+media-width-above($screen-lg-min)
#content
Those mixins will be useable just like +make-sm-column or .col-md-5 classes. You can just use it like this:
body
+media-xs
background-color: yellow
+media-sm
background-color: blue
+media-md
background-color: red
+media-lg
background-color: green
When you will be making your browser smaller by changing it from large to xs, you'll see colors in this order: green, red, blue, yellow.