Handling multiple media queries in Sass with Twitter Bootstrap
Posted
by
Keith
on Stack Overflow
See other posts from Stack Overflow
or by Keith
Published on 2012-11-03T22:31:15Z
Indexed on
2012/11/05
23:00 UTC
Read the original article
Hit count: 200
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?
© Stack Overflow or respective owner