O código se explica sozinho, então aqui está:

$mq-support: true !default;
@mixin pe-media( $min: null, $max: null,  $height: false, $serve-to-nomq: true ) {

    @if $min == null and $max == null  {
        @warn "Mixin PE-Media requires at least a MIN or MAX width/height";
    }

    $direction: 'width'; 
    /* If $height is true, override the variable. */
    @if $height == true {
        $direction: 'height'; 
    }

    @if $mq-support {
        @if $min != null and $max != null {
            @media ( 'min-' + $direction + ':' + $min ) and ( 'max-' + $direction + ':' + $max ) {
                @content;
            }
        } @else if $max != null {
           @media ( 'max-' + $direction + ':' + $max ) {
                @content;
            }
        } @else {
            @media ( 'min-' + $direction + ':' + $min ) {
                @content;
            }
        }
    } @else {
        @if $serve-to-nomq {
            @content;
        }
    }
}

@include pe-media() aceita os seguintes argumentos:

$min: null
Requeridos. Será usado como@media ( 'min-' + $direction + ':' + $min )

$max: null
Opcional. Adicionaráand ( 'max-' + $direction + ':' + $max )

$height: false
Opcional. Se definido como verdadeiro, a variável interna $directionserá definida como altura, alterando as consultas mín. / Máx. Para altura em vez de largura.

$serve-to-nomq: true
Opcional. Uma maneira de informar a função para não produzir QUALQUER COISA em navegadores não habilitados para consulta de mídia.

Agora, vamos explicar um pouco.

Digamos que você tenha esta marcação:

<div class=”col-row default-columns”>
    <article class=”column main-content” role=”main”>
        Content
    </article>
    <aside class=”column main-sidebar” role=”complementary”>
        Content
    </aside>
</div>

Com este SCSS e nosso mixin mágico de pe-media ():

.default-columns {

    @include pe-media( $breakpoint-small, $serve-to-nomq: false ) {

        & > [role="main"], & > [role="complementary"] { float: left; }

        & > [role="main"] { width: 60%; }

        & > [role="complementary"] { width: 40%; }
    }

    @include pe-media( $breakpoint-medium ) {

        & > [role="main"], & > [role="complementary"] { float: left; }

        & > [role="main"] { width: 67%; }

        & > [role="complementary"] { width: 33%; }
    }
}

Obteremos este CSS para navegadores habilitados para consulta de mídia:

@media (min-width: 600px) {
    .default-columns>[role="main"],.default-columns>[role="complementary"] {
        float:left;
    }
    .default-columns>[role="main"] {
        width:60%;
    }
    .default-columns>[role="complementary"] {
        width:40%;
    }
}

@media (min-width: 740px) {
    .default-columns>[role="main"],.default-columns>[role="complementary"] {
        float:left;
    }
    .default-columns>[role="main"] {
        width:67%;
    }
    .default-columns>[role="complementary"] {
        width:33%;
    }
}

E este CSS para navegadores não habilitados para consulta de mídia:

.default-columns>[role="main"],.default-columns>[role="complementary"] {
    float:left;
}
.default-columns>[role="main"] {
    width:67%;
}
.default-columns>[role="complementary"] {
    width:33%;
}

Nossos arquivos SASS são configurados com um arquivo mestre que inclui um monte de parciais para nossas funções, mixins, variáveis, etc … e contém todos os estilos de nosso site dentro e fora deste mixin. Então temos dois arquivos que compilam em CSS: e ._project.scssmq.scssno-mq.css

mq.scss =

@import "project";

É isso aí. Uma vez que definimos $ mq-support como true antes do mixin, tudo dentro do projeto está pronto para ser compilado. Para no-mq.scss, há apenas uma pequena mudança:

no-mq.scss =

$mq-support: false;
@import "project";

Visto que essa variável foi alterada nesta instância, tudo usando nosso mixin dentro do projeto será analisado de forma diferente.

Por quê? Porque é incrível.

Por causa dessa combinação e da maneira como funciona, podemos aplicar @mediaconsultas embutidas por elemento, em vez de agrupá-los todos em um lugar ou outro. Então, enquanto você está escrevendo estilos para <header>e todos os elementos que ele contém, você pode facilmente escrever estilos adicionais agrupados em pontos de interrupção para ver rapidamente o que os elementos em seu cabeçalho fazem em tamanhos diferentes.

Você pode usar variáveis ​​para definir seus principais pontos de interrupção ou pode inserir valores de ponto de interrupção específicos para o elemento com o qual está trabalhando. Como Ben Callahan afirmou, “Não há ponto de interrupção” . Este método mantém todos os seus estilos em diferentes pontos de interrupção em um só lugar e oferece controle sobre quais estilos são compilados para navegadores mais antigos.