Handling multiple media queries in Sass with Twitter Bootstrap
- by Keith
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?
