Breakpoint without Compass

_breakpoint.scss

@mixin breakpoint($size: "", $maxWidth: false) {
    @if $size == "" {
        $size: 20em; // Put your "main" or most-used breakpoint here to use it as a default
    }

    // Default, `min-width` media query
    @if $maxWidth == false {
        @media (min-width: $size) { @content; }
    }
    // Alternative `max-width` media query
    @else {
        @media (max-width: $size) { @content; }
    }
}

style.css

.foo {
    width: 100%;
}

@media (min-width: 10em) {
    .foo {
        width: 50%;
    }
}

@media (min-width: 20em) {
    .foo {
        width: 25%;
    }
}

@media (max-width: 5em) {
    .foo {
        float: left;
    }
}

style.scss

@import "_breakpoint";

.foo {
    width: 100%;
    
    // Standard usage
    @include breakpoint(10em) {
        width: 50%;
    }
    
    // Look ma, no parameters! (Quick and easy use for the most common breakpoint)
    @include breakpoint {
        width: 25%;
    }
    
    // Use a max-width media query instead
    @include breakpoint(5em, true) {
        float: left;
    }
}