Snippets

Mixins de Media Queries con Sass

0

Hay muchas formas de crear Mixins para generar los bloques condicionales de los Media Queries. La idea de los mixins en Sass es ahorrarnos tiempo al momento de generar bloques de código css repetitivo y totalmente funcionales y dinámicos, en esta entrada de Snippets te voy a enseñar una forma fácil y practica de utilizar los mixins para generar los diferentes bloques condicionales de los Media Queries, donde solo deberemos especificar el nombre genérico del dispositivos y las reglas que lo afectan. Veamos:

// ==========  Mixins para los Media Queries  ==========
@mixin media($consulta) {
  
  $media-xxs:"(min-width : 320px)"; // iPhone Retina 
  $media-xs: "(min-width : 480px)"; // Telefonos
  $media-sm: "(min-width: 768px)";  // Tablets
  $media-md: "(min-width: 992px)"; // Escritorios
  $media-lg: "(min-width: 1200px)"; // Resoluciones grandes
  
  @if $consulta == xxs {
    @media #{$media-xxs} { @content; }
  }
  @if $consulta == xs {
    @media #{$media-xs} { @content; }
  }
  @else if $consulta == sm {
    @media #{$media-sm} { @content; }
  }
  @else if $consulta == md {
    @media #{$media-md}  { @content; }
  }
  @else if $consulta == lg {
    @media #{$media-lg}  { @content; }
  }
}

Lo que hacemos es crear un clásico mixin de Sass, definimos las diferentes variables con las  resoluciones genéricas, desde el dispositivo más pequeño con una resolución mínima de 320px hasta las pantallas más grandes, luego creamos los diferentes bloques condicionales donde consultamos que si la consulta es igual a la resolución aplicada se aplique las propiedades css aplicadas al mixin en cuestión.

¿Cómo los aplicamos?

La aplicación es simple, utilizamos la forma clásica de aplicar los Media Queries en Sass, y eso es de la siguiente manera.

Si no entiendes muy bien el concepto de los Mixins en Sass te recomiendo ver: El Poder de los Mixins en Sass

Comentar

avatar
wpDiscuz