Como usar media queries en Sass

En el siguinte texto te mostraré una forma de hacer uso de media queries en tus proyectos con Sass.

La siguiente práctica hace que podamos escribir los cambios dentro del mismo bloque del código que tenga los estilos de nuestro selector objetivo.

Esto lo logramos con un mixin y la At-rule @content, veamos como se hace:

1. Declaramos un mixin que contenga nuestra media querie, dentro de esta añadimos la at-rule @content, esto hace que todos los estilos que escribamos dentro del mixin se apliquen a la media querie.

@mixin tablet {
    @media screen and (max-width: 900px) {
        @content
    }
}
@mixin mobile{
    @media screen and (max-width: 520px) {
        @content
    }
}

1. Lamamos al mixim con la at-rule @include, usamos el mixim con la media querie deseada, abrimos llaves y dentro de ellas colocamos los estilos deseados

section{
    width: 100%;
    color: red;
    @include tablet() {
        color: yellow;
    }
    @include mobile() {
        color: blue;
    }
}

Si deseas mas información, estos links puden ayudarte.

• Fuente
• Ejemplo de mi código