SASS media query mixin structuring.

_media-queries.sass

@mixin galaxyPocket
    @media only screen and (max-width: 300px)
        @content

output.css

/* Now we just need SASS to combine media queries, or implement something like @buffer: https://github.com/nex3/sass/issues/116 */
.ad-box {
    color: black;
}

@media only screen and (max-width: 300px) {
    .ad-box {
        padding: 3.5px;
    }
}

.ad-box.slim {
    padding: 7px 21px;
}

@media only screen and (max-width: 300px) {
    .ad-box.slim {
        padding: 3.5px;
    }
}

styles.sass

@import "media-queries"

$standard-padding: 7px

.ad-box
    color: black

    @include galaxyPocket
        padding: $standard-padding / 2

    &.slim
        padding: $standard-padding $standard-padding*3

        @include galaxyPocket
            padding: $standard-padding / 2