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: 171

Filed under:
|
|

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

Related posts about css

Related posts about sass