Media Queries in a Mixin

gistfile1.sass

.element {
    background: red;
    
    @include medium() {
        background: blue;
    }
    
    @include wide() {
        background: red;
    }
    
    @include retina() {
        background: yellow;
    }
}

//--------------------

@mixin medium() {
    @media only screen and (min-width: 30em) {
        @content;
    }
}

@mixin wide() {
    @media only screen and (min-width: 50em) {
        @content;
    }
}

@mixin retina() {
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
        @content;
    }
}