Este útil mixin de SCSS me ha ayudado a mantener consistencia y legibilidad en el código de un proyecto donde estamos muchas personas trabajando de manera remota.

La idea es definir los valores normales para el estado que desees (desktop-first, mobile-first) y las variaciones de @media las declaras dentro del mismo selector. Así es fácil saber todas las propiedades y valores que éste tiene, logrando inter-operabilidad en equipos de trabajo de varias personas y teniendo algunos de ellos mantener mi código y vice-versa.

// variables:
$breakpoint-xs: 360px;
$breakpoint-sm: 767px;
$breakpoint-md: 1023px;
$breakpoint-lg: 1360px;

@mixin media($media) {
  @if $media == xs {
    @media (max-width: $breakpoint-sm) { @content; }
  }
  @else if $media == sm {
    @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md) { @content; }
  }
  @else if $media == md {
    @media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) { @content; }
  }
  @else if $media == lg {
    @media (min-width: $breakpoint-lg) { @content; }
  }
}

Uso:

@include media(xs) {
  property: value;
}

Ejemplo (SCSS):

.elemento {
  font-size: 1.2em;
  color: #c00;

  @include media(xs) {
    font-size: 1.6em;
  }
}

Output (CSS):

.elemento {
  font-size: 1.2em;
  color: #c00;
}
@media (max-width: 767px) {
  .elemento {
    font-size: 1.6em;
  }
}

Link:

• Responsive Web Design in Sass: Using media queries in Sass 3.2