¿Cómo usar variables Sass con consultas de medios CSS3?

Variables SASS: Las variables SASS son muy simples de entender y usar. Las variables SASS asignan un valor a un nombre que comienza con el signo $y luego solo se refieren a ese nombre en lugar del valor. A pesar de esto, son una de las herramientas más útiles que proporciona SASS. 
Las variables SASS proporcionan las siguientes características: 
 

• Reducir la repetición
• hacer matemáticas complejas
• Configurar bibliotecas
• y mucho más …

Consultas de medios CSS : Las consultas de medios CSS son las características de CSS3 que permiten especificar cuándo se deben aplicar las reglas CSS dadas. Las consultas de medios funcionan teniendo en cuenta la capacidad del dispositivo. Se pueden utilizar para comprobar muchas cosas, por ejemplo: 
 

• Ancho y alto de la ventana gráfica
• Ancho y alto del dispositivo.
• Orientación (horizontal o vertical)
• Resolución del dispositivo

El uso de variables SASS con consultas de medios CSS3 no es muy fácil de implementar. Solo es posible si SASS toma todas las propiedades de las consultas en la hoja de estilo que contiene la variable SASS y luego las cambia en consecuencia. 
Se puede hacer de dos formas: 
 

• Usando las variables Post-CSS
• Usando mezclas

Uso de variables posteriores a CSS: el siguiente ejemplo funciona muy bien con SASS (incluso para navegadores más antiguos). 
 

$width1: 1280px;
$width2: 1720px;
 
:root {
    f-size: 20px;
    f-family: Helvetica, sans-serif;
}
 
@media (min-width: $width1) and (max-width: $width2) {
    :root {
        f-size: 22px;
        f-family: Helvetica;
        ;
    }
}
 
@media (min-width: $mq-hhd) {
    :root {
        f-size: 24px;
        f-family: sans-serif;
        ;
    }
}
 
.my-element {
    font-size: var(f-size);
    color: red;
    font-family: var(f-family);
}

El código daría como resultado la salida CSS escrita a continuación. Las consultas de medios repetitivas obviamente aumentarán el tamaño del archivo, pero se encuentra que el aumento suele ser insignificante tan pronto como el servidor web aplica la compresión (que normalmente lo hará por sí mismo).
 

    .my-element {
        font-size: 20px;
        font-family: Helvetica, sans-serif;
    }

    @media (min-width: 1280px) and (max-width: 1719px) {
        .my-element {
            font-family: Helvetica;
        }
    }

    @media (min-width: 1720px) {
        .my-element {
            font-family: sans-serif;
        }
    }

    @media (min-width: 1280px) and (max-width: 1719px) {
        .my-element {
            font-size: 22px;
        }
    }

    @media (min-width: 1720px) {
        .my-element {
            font-size: 24px;
        }
    }

Uso de mixins: te permite tener todo en un solo archivo si lo deseas. 
 

@mixin change($width) {
 
    // your SCSS here
    #Contents {
        width: $width;
    }
}
 
@media screen and (max-width: 140px) {
    @include change($width: 720px);
}
 
@media screen and (min-width: 1441px) {
    @include change($width: 960px);
}

Este código mostrará el siguiente resultado. 
 

    @media screen and (max-width: 140px) {
        #Contents {
            width: 720px;
        }
    }

    @media screen and (min-width: 1441px) {
        #Contents {
            width: 960px;
        }
    }