Las media queries en SASS

Las media queries son elementos imprescindibles en cualquier hoja de estilos actual. Desde que se empezó a extender la navegación en Internet con dispositivos móviles de pantallas pequeñas, una web que no sea responsiva no sólo está rechazando a un número importante de visitantes, sino que, además, está siendo penalizada por los principales buscadores. No importa lo interesante que sea tu contenido. Si tu web no se adapta a cualquier tamaño de pantalla, está fuera de juego.

Si bien al principio de la «fiebre de la responsividad» era suficiente hacer los diseños usando medidas porcentuales para los contenedores y los contenidos, hoy día es inconcebible que haya hojas de estilos que no empleen media queries, o que haya desarrolladores que no sepan lo que son y cómo funcionan.

Aunque SASS no aporta, estrictamente hablando, funcionalidades nuevas a las media queries, si facilita su uso, así como su implantación a distintos selectores. En este artículo vamos a ver cómo hacerlo.

LAS MEDIA QUERIES EN CSS

Todos sabemos lo que son las media queries en CSS. Se trata de condicionales (sí, he dicho condicionales), que evalúan una condición basada en la resolución de pantalla, tipo de medio, orientación (vertical u horizontal), resolución de color, y cualquier otro aspecto que afecte a la visualización. Si la condición es cierta, establecen determinadas reglas CSS para un selector específico. Así, por ejemplo, se determina que las etiquetas aside de un documento se posicionen a la izquierda, con una anchura de 400px en dispositivos de escritorio, pero que ocupen todo el ancho de la pantalla (desplazando otros contenidos hacia abajo) en smartphones. O que una etiqueta header sólo sea visible en tablets en orientación horizontal y ordenadores, pero no en smartphones o tablets en orientación vertical. Las posibilidades son muchísimas, debido a la enorme variedad de dispositivos que se pueden usar hoy día para acceder a Internet.

En este artículo no vamos a aprender las reglas que permiten crear media queries. Si eres desarrollador frontend, seguro que ya las usas con cierta frecuencia, con mayor o menor grado de refinamiento. Si quieres consultar detalles acerca de cómo se crean las media queries, hay un sitio en Internet que no puedes dejar de visitar, por lo exhaustivo y bien detallado que está: la web de Mozilla para desarrolladores. En ningún otro lugar encontrarás tanta información útil al respecto.

Para «ponernos en onda», vamos a ver un ejemplo muy sencillo de una media query en CSS. Se llama media_css.css:

En este ejemplo hemos trabajado sobre las reglas CSS que se aplicarán a la etiqueta aside. Como ya sabes, esta se suele emplear con la finalidad de crear una zona lateral de contenidos auxiliares, o complementarios.

Como las buenas prácticas de programación nos dicen que debemos diseñar con la filosofía mobile-first (es decir, diseñar la página pensando en que vaya a ser visualizada, mayoritaria y prioritariamente en dispositivos móviles), hemos diseñado la etiqueta aside para que cubra todo el ancho disponible de la pantalla, como ves en la línea 9 del código.

Sin embargo, es posible que nuestra web vaya a visualizarse en dispositivos con pantallas de mayores dimensiones. Aquí es donde entra en juego la media query que se inicia en la línea 17. Lo que hacemos es usar la directiva @media para evaluar si la pantalla tiene una anchura mínima de 20rem, con la condición (min-width: 20rem). Si se cumple esta condición, eso le indica a la hoja de estilos que se está visualizando en una pantalla mayor, y se aplican los estilos que se redefinen en el cuerpo de la media query. Como ves, no se redefine toda la etiqueta aside, sino sólo aquellos valores que es necesario sobrescribir (el haber establecido cómo límite 20rem es una mera arbitrariedad; podríamos haber establecido cualquier valor, según los dispositivos a los que nos dirjamos).

Todo esto no es nada nuevo. Es un breve ejemplo del funcionamiento normal de las media queries en CSS.

LAS MEDIA QUERIES EN SASS

SASS no te va a aportar nada nuevo acerca de lo que puedes hacer con las media queries. Todas sus prestaciones están detalladas en la especificación CSS 3 y expuestas en la web que te he indicado anteriormente. Lo que si te aporta SASS es una mayor optimización a la hora de escribir tus media queries en tus hojas de estilos, de modo que te ahorres trabajo y código. Observa el código media_1.scss:

Observa como hemos incluido la media query anidada en las reglas de la etiqueta a la que va a afectar. Con sólo este pequeño código, no parece gran cosa, pero hacer esto así nos permite optimizar mucho el código, cuando hay más media queries, o más etiquetas afectadas. Al transpilar, obtenemos el listado media_1.css:

Cómo ves, es el mismo que el primero que hicimos en el apartado anterior. Aquí la media query no aparece anidada, porque, como ya sabes, CSS no soporta el anidamiento.

La escritura en SASS se puede optimizar más. En esta ocasión, en lugar de compactar lo que vamos a hacer es desacoplar código, que es una muy buena práctica de programación para facilitar la mantenibilidad de las aplicaciones. Lo que hacemos, de cara al mencionado desacoplamiento, es crear un partial con variables, otro con un mixin con la media query, y un fichero de estilos que usa los dos partials anteriores. El partial de las variables lo hemos llamado _variables.scss:

Como ves, no tiene nada que no conozcas ya. Son sólo las declaraciones de algunas variables.

A continuación creamos un partial con un mixin que define la media query, en _mixins.scss:

Por último, definimos el fichero de hojas de estilos, que hace uso de los dos partials anteriores. Observa que se carga primero _variables.scss, porque una de las variables que en él se declaran es usada en _mixins.scss, por lo que debe estar en memoria cuando se cargue este último. La hoja de estilos se llama media_2.scss:

Cuando transpilas este último, el resultado es el mismo que hemos conocido en los ejemplos anteriores, con la diferencia de que los originales SASS sobre los que trabajas están mucho más desacoplados, y son más mantenibles.

CONCLUYENDO

Es curioso que, si te pones a pensarlo, en este artículo no hemos tocado nada específico de SASS que no conociéramos ya de otros artículos, o de nuestra propia experiencia con CSS. Sin embargo, hemos usado un concepto tan interesante como las media queries para afianzar un modo de trabajo, y ver cómo SASS nos puede ayudar en nuestro día a día. Los códigos de este artículo, para que experimentes con ellos, están en este enlace. En el próximo artículo conoceremos una funcionalidad de SASS que muchos no saben que tiene, y que puede resultar muy útil. Espero que te guste.

   

Deja un comentario