Smarter Sass Media Queries

smarter-sass-media-queries.md

_mixins.scss:

$retina-display: '(-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (min--moz-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3)';

$breakpoints: (
    mobile:   '(max-width: 580px)',
    tablet:   '(min-width: 581px) and (max-width: 890px)',
    notebook: '(min-width: 891px) and (max-width: 1120px)',
    desktop:  '(min-width: 1121px) and (max-width: 1400px)',
    cinema:   '(min-width: 1401px)'
);

@mixin breakpoint($point) {
    @media only screen and #{map-get($breakpoints, $point)}  {
        @content;
    }
}

main.scss:

.something {
    width: 100%;
    @include breakpoint(mobile) {
        max-width: 500px;
    }    
}

#logo {
    background: url(../img/Logo1x.png) no-repeat 0 0;
    width: 168px;
    height: 67px;
    @media #{$retina-display} {
        background: url(../img/Logo2x.png) no-repeat 0 0;
        background-size: 168px 67px;
    }
}

Sources

• A Book Apart, Sass for Web Designers
• Sass Maps Are Awesome! | Viget
• Check Your Breakpoint using this Simple CSS Snippet | Viget

This is a Solutions Log post.