El desarrollo web moderno exige una adaptabilidad impecable a diversos tamaños de pantalla. Para lograrlo, las conusltas de medios (media queries) son fundamentales. Este artículo explora una implementación avanzada en SCSS que simplifica la gestión de la lógica responsiva, permitiendo aplicar estilos condicionales tanto mediante las propias consulats de medios como a través de clases CSS, sin la necesidad de iframes.

El núcleo de esta estrategia reside en un conjunto de variables, funciones y mixins de SCSS, diseñados para abstraer la complejidad de las media queries y ofrecer una sintaxis más limpia y mantenible.

Definición de Breakpoint Principal

Comenzamos estableciendo un valor base para nuestros puntos de interrupción responsivos:

$breakpointEscritorio: 1024px;

Esta variable, $breakpointEscritorio, define el ancho mínimo para considerar una pantalla como "escritorio" o de gran tamaño.

Funciones para Mapear Condiciones y Consultas

obtener-condicion-media: Traduciendo Alias a Condiciones CSS

Esta función actúa como un traductor, convirtiendo alias cortos y descriptivos en fragmentos de consultas de medios o selectores de clase específicos. Su propósito es generar condiciones CSS para ser utilizadas en diversas partes de nuestra lógica responsiva.

@function obtener-condicion-media($alias) {
 $mapeoCondiciones: (
   "pantalla": "only screen",
   "desdeEscritorio": "(min-width: #{$breakpointEscritorio + 1})",
   "hastaEscritorio": "(max-width: #{$breakpointEscritorio})",
   "tablet": ".ui-screen-md", // Para pantallas <=1200px (ejemplo de clase)
   "movilGrande": ".ui-screen-sm", // Para pantallas <=1024px (ejemplo de clase)
   "movilPequeno": ".ui-screen-xs" // Para pantallas <=767px (ejemplo de clase)
 );
 @return map-get($mapeoCondiciones, $alias);
}

• "pantalla": Retorna "only screen" para una consulta de medios básica.
• "desdeEscritorio": Genera "(min-width: 1025px)" para estilos de escritorio.
• "hastaEscritorio": Genera "(max-width: 1024px)" para estilos que aplican hasta ese ancho.
• "tablet", "movilGrande", "movilPequeno": Retornan nombres de clase, como ".ui-screen-md", que pueden ser usados para aplicar estilos mediante selectores de clase.

obtener-consulta-responsiva: Consultas de Medios Completas

Similar a la función anterior, pero esta vez se encarga de proporcionar la cadena completa de una media query para los puntos de interrupción comunes, facilitando su uso directo en las reglas @media.

@function obtener-consulta-responsiva($alias) {
 $mapeoConsultas: (
   "tablet": "only screen and (min-width: #{$breakpointEscritorio + 1})", // Aplica desde 1025px en adelante
   "movilGrande": "only screen and (max-width: #{$breakpointEscritorio})", // Aplica hasta 1024px
   "movilPequeno": "only screen and (max-width: 767px)" // Aplica hasta 767px
 );
 @return map-get($mapeoConsultas, $alias);
}

Esta función simplifica la definición de las media queries completas, como "only screen and (max-width: 1024px)", asociándolas a alias significativos.

Mixins para Aplicar Estilos Responsivos

aplicar-media: Creación Dinámica de Consultas de Medios

El mixin aplicar-media acepta múltiples argumentos y los combina para construir una única y potante regla @media. Utiliza la función obtener-condicion-media para transformar cada argumento en su condición correspondiente.

@mixin aplicar-media($argumentos...) {
 $cadenaConsulta: "";
 @each $arg in $argumentos {
   $operadorSeparador: "";
   @if ($cadenaConsulta != "") {
     $operadorSeparador: " and ";
   }
   $cadenaConsulta: $cadenaConsulta + $operadorSeparador + obtener-condicion-media($arg);
 }
 @media #{$cadenaConsulta} {
   @content;
 }
}

Este mixin es ideal para escenarios donde se necesitan combinaciones complejas de condiciones de medios, como @include aplicar-media("pantalla", "desdeEscritorio");.

ajustar-respuesta: Doble Estrategia Responsiva

El mixin ajustar-respuesta es el corazón de esta implementación, ofreciendo una doble aproximación para aplicar estilos responsivos: a través de una media query tradicional y, opcionalmente, mediante la aplicación de un selector de clase a nivel de raíz. Esto permite flexibilidad y compatibilidad en distintos contextos de diseño.

@mixin ajustar-respuesta($aliasPuntoInterrupcion) {
 $selectorClase: obtener-condicion-media($aliasPuntoInterrupcion); // Por ejemplo, ".ui-screen-sm"
 $consultaMediaReal: obtener-consulta-responsiva($aliasPuntoInterrupcion); // Por ejemplo, "only screen and (max-width: 1024px)"
 $selectorActual: &; // Referencia al selector actual donde se incluye el mixin

 @media #{$consultaMediaReal} {
   @content;
 }

 // Si el alias no es "tablet" (que representa el punto de interrupción de escritorio/min-width),
 // se aplica también un selector de clase a nivel de raíz.
 // Esto permite que los estilos se apliquen tanto por media query como por clase para ciertas condiciones.
 @if ($aliasPuntoInterrupcion != 'tablet') {
   @at-root #{$selectorClase} #{$selectorActual} {
     @content;
   }
 }
}

Este mixin primero aplica los estilos dentro de una regla @media usando la consulta generada por obtener-consulta-responsiva. Luego, para puntos de interrupción específicos (todos excepto el equivalente a "tablet" o escritorio en este ejemplo), también inserta los mismos estilos bajo un selector de clase prepuesto en la raíz (ej. .ui-screen-sm .mi-elemento). Esto es particularmente útil para asegurar la aplicación de estilos en entornos que podrían no interpretar correctamente las media queries o para permitir una anulación basada en clases.

Ejemplo de Uso y Compilación

Consideremos el siguiente ejemplo de código SCSS para ilustrar cómo se utilizan estos mixins en la práctica y cuál es el resultado compilado.

Código SCSS Antes de la Compilación

.elementos {
   width: 100%;

   // Estilos para pantallas hasta 1024px de ancho
   @include ajustar-respuesta("movilGrande") {
       width: 80%;
   }

   // Estilos para pantallas hasta 767px de ancho
   @include ajustar-respuesta("movilPequeno") {
       width: 60%;
   }
}

Código CSS Después de la Compilación

El compilador de SCSS transformará el código anterior en las siguientes reglas CSS, aplicando las condiciones de media query y las clases según lo definido en los mixins:

.elementos {
 width: 100%;
}
@media only screen and (max-width: 1024px) {
 .elementos {
   width: 80%;
 }
}
.ui-screen-sm .elementos {
 width: 80%;
}
@media only screen and (max-width: 767px) {
 .elementos {
   width: 60%;
 }
}
.ui-screen-xs .elementos {
 width: 60%;
}

Como se observa, para cada inclusión de ajustar-respuesta, se generan dos bloques de CSS: uno con la media query explícita y otro con el selector de clase correspondiente. Esto proporciona una robusta capa de estilos responsivos.