Mixin para anchos condicionales a ancho del dispositivo (usando media queries)

gistfile1.scss

@mixin tipodecelular($breakpoint, $ancho, $alto) {
    @media screen and (max-width: $breakpoint) {
        width: $ancho;
        height: $alto;
    }
}

// Teniendo algo como lo siguiente:
// Breakpoints
$break-small: 320px;
$break-small-medium: 480px;
$break-medium: 768px;
$break-large: 1200px;

//Y un elemento así:
.logo {
    h1 {
        background-color: red;
        width: 300px;
        height: 600px;
        text-indent: -9999px;
        display: block;
        @include tipodecelular($break-small, 100px, 20px);
    }
}

// El ancho de la imagen se ajustará cuando se llegue al ancho máximo dado por $breakpoint