Handy Sass mixin para criar pontos de interrupção de consulta de mídia dinamicamente

Tenho feito bastante design responsivo ultimamente e descobri que sempre preciso ajustar diferentes aspectos do meu design em muitos pontos de interrupção diferentes, não apenas pontos de interrupção para dispositivos comuns. Isso mantém seu design com boa aparência, independentemente do tamanho da tela.

Então, aqui está um mixin Sass que permitirá que você defina pontos de interrupção em seu código Sass na hora.

Primeiro, adicione o mixin no topo de seu arquivo scss ou outro arquivo incluído onde você está mantendo seus mixins.

@mixin respond-to($breakpoint) {
    @media only screen and (max-width: $breakpoint + px) { @content; }
}

Então, quando você precisar definir pontos de interrupção para algo, basta usá-los assim:

.my-awesome-element {
    color: red;
}

@include respond-to(648) {
    .my-awesome-element {
        color: green;
    }
}

Ou você pode fazer o seguinte:

.my-awesome-element {
    color: red;

    @include respond-to(800) {
        color: blue;
    }

    @include respond-to(520) {
        color: gray;
    }
}

Se você estiver fazendo uma abordagem mobile-first, apenas mude o mixin para usar min-width em vez de max-width .

@mixin respond-to($breakpoint) {
    @media only screen and (*min-width*: $breakpoint + px) { @content; }
}