Los media querys son una forma de acomodar nuestro sitio web para diferentes dispositivos.

Con la utilización de SASS en cada ves más proyectos se vuelve necesario simplificar el proceso de declaración de nuestros breakpoints y para esta tarea se utilizan los mixins, los cuales son una porción de código que podemos reutilizar en esas partes que se hacen repetitivas.

Para definir los mixins vamos a colocar tres break points los cuales son:

Moviles: 767px

Tablets: mínimo 768px, máximo 999px

Desktop: 1280px

pasamos a la declaración creamos un nuevo archivo.scss y en este dejaremos el siguiente código:

ahora importaremos este archivo en nuestro scss de la siguiente forma:

@import '../../utils/mixins.scss';

ahora lo vamos a utilizar definiendo nuestros estilos para los diferentes dispositivos

Y con esto ya tendríamos implementado nuestros break points de una forma más practica y sencilla de utilizar.

Espero te ayudara este post.

Gracias por leer, nos vemos en la próxima.