Media Query Mixins En SASS

Esta es una de las razones por las cueles me gusta utilizar SASS como preprocesador de CSS y es que es muy facil condicionar variales y utilizar loops para no repetir tanto el mismo codigo. Estos son algunos mixins que siempre utilizo para los media queries, muy efectivos.

Muchos prefieren darle nombres comunes como table, desktop, laptop, etc. Yo prefiero ponerles nombres de Superheroes.

@mixin breakpoint($point) {
  @if $point == superman {
    @media (max-width: 1600px) { @content; }
  }
  @else if $point == ironman {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == batman {
    @media (max-width: 650px)  { @content; }
  }
}

Para usarlo:

@include breakpoint(batman) {
    // estilos
}

Utilizando un Array.

$device_widths: (100px, 200px, 300px, 400px, 500px, 600px, 700px, 800px, 900px, 1000px, 1100px, 1200px, 1300px, 1400px);

@mixin device-width($i){
    @media only screen and (max-width: (nth($device_widths, $i))){
        @content;
    }
}

Para usarlo:

@include device-width(10){
    // estilos
}

Donde 10 es la posicion donde se encuentra el valor a utilizar, en este caso 1000px.