Web responsive utilizando mixins en Sass

Una diseño responsive consiste en que el diseño se adapta de acuerdo al tamaño de la pantalla de dispositivo utilizado, de esta forma podemos adaptar el contenido a la pantalla para que se puede visualizar correctamente.

Media Queries

Los @media queries son filtros aplicables a estilos CSS que permiten cambiar las propiedades de acuerdo a alguna característica del dispositivo. Dentro de la declaración del @media podemos agregar todos los estilos que deseamos modificar.

Se pueden aplicar uno varios filtros incluyendo operadores lógicos, entre los filtros mas usados se tienen:

screen: identifica a pantallas.
print: identifica a impresoras.
min-width: aplica desde un mínimo de ancho de pantalla.
max-width: aplica hasta un máximo de ancho de pantalla.
orientation=portrait: aplica si el alto es mayor que el ancho.
orientation=landscape: aplica si el alto es menor que el ancho.

Veamos un ejemplo dónde ocultamos un elemento cuando se visualize en pantallas con un ancho sea menor a 600 pixels. Esto se puede aplicar para ocultar bloques en pantallas móviles.

Mobile First

Se recomienda trabajar con diseño mobile first, es decir que funcione inicialmente en dispositivos móviles y luego utilizando los media queries se hacen las adaptaciones para las otras pantallas.

Breakpoints

Los breakpoints son los valores a partir de los cuales adaptamos el diseño, es posible utilizar cualquier valor como breakpoint pero es recomendable utilizar valores estandarizados. Por ejemplo podemos guiarnos de Bootstrap o Material Design que son dos proyectos que trabajan en mobile first.

Breakpoints Bootstrap

768px: para pantallas de tablet.
992px: para pantallas de desktop.
1200px: para pantallas de desktop grandes.

Breakpoints Material Design

600px: para pantallas de tamaño small.
1024px: para pantallas de tamaño medium.
1440px: para pantallas de tamaño large.

Sass Mixins para Responsive

Ahora que ya sabemos cómo construir pantallas responsive además de los breakpoints recomendados, utilicemos los mixins en Sass para automatizar la tarea de creación de CSS.


// Responsive mixins using "Bootstrap" breakpoints

@mixin tablet {
  @media only screen and (min-width: 768px) {
    @content;
  }
}

@mixin desktop {
  @media only screen and (min-width: 992px) {
    @content;
  }
}

@mixin large {
  @media only screen and (min-width: 1200px) {
    @content;
  }
}


// Responsive mixins using "Material Design" breakpoints

@mixin small {
  @media only screen and (min-width: 600px) {
    @content;
  }
}

@mixin medium {
  @media only screen and (min-width: 1024px) {
    @content;
  }
}

@mixin large {
  @media only screen and (min-width: 1440px) {
    @content;
  }
}

Utilizando los mixins

Podemos escoger los mixins que se adapten a nuestro proyecto, como ejemplo vamos a usar los mixins basados en Bootstrap, aplicamos responsive de la siguiente forma:


h1 {
  font-size: 24px;
  @include tablet {
    font-size: 36px;
  }
  @include desktop {
    font-size: 42px;
  }
}

La ventaja de este método es que fácil de entender: los valores iniciales para mobile, luego se aplican los valores para tablet y finalmente para desktop.

Se procesa el archivo Sass y se obtiene el siguiente resultado:


h1 {
  font-size: 24px;
}

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 36px;
  }
}

@media only screen and (min-width: 992px) {
  h1 {
    font-size: 42px;
  }
}

Ahora si estas listo, agrega los mixins a tu proyecto y agiliza la creación webs responsive de forma sencilla y fácil de entender.