Dynamic Media Queries in SASS to avoid repetitive typing and having to remember what screen widths you had targeted. There is a map of five common ranges of device widths, but you can also pass in a custom width. Stay DRY (don't repeat yourself).

functions.scss

// Divide screen width into five broad groups.
$mediaXL: 1200px;
$mediaLarge: 992px;
$mediaMedium: 768px;
$mediaSmall: 576px;
$mediaExtraSmall: 480px;

/* Thanks 3rdthemagical for sharing the helper function for converting string to number.
This is useful when we want to pass a custom device width that's different from any of the options above.
*/
@function to-number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    @error 'Value for `to-number` should be a number or a string.';
  }

  $result: 0;
  $unit: '';
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);

    @if (index(map-keys($numbers), $character) or $character == '.') {
      @if $character == '.' {
        $digits: 1; 
      } @else if $digits == 0 {
        $result: $result * 10 + map-get($numbers, $character);  
      } @else {
        $digits: $digits * 10;
        $result: $result + map-get($numbers, $character) / $digits;
      }
    } @else {
        $unit: $unit + $character;
    } 
  }
$map: (
'integer': $result,
  'unit': $unit
);
@return $map;
}

@function getUnit($value) {
    $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
    $unit: '';
    @for $i from 1 through str-length($value) {
        $character: str-slice($value, $i, $i);
        @if (index(map-keys($numbers), $character) == null) {
            $unit: $unit + $character;
        }
    }
    @return $unit;
}

@function translate-media-condition($c) {
    $mediaTypeMap: (
        "screen": "only screen",
        "print": "only print",
        "retina": "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 120dpi)",
    );
    $widthMap: (
        "xs": $mediaExtraSmall,
        "sm": $mediaSmall,
        "md": $mediaMedium,
        "lg": $mediaLarge,
        "xl": $mediaXL
    );
    // If the parameter contains the less or greater than symbols, it is a query for screen width.
    @if (str-index($c, ">") or str-index($c, "<")) {
        // get the sign, which is either ">" or "<"
        $sign: str-slice($c, 1, 1);
        $width: str-slice($c, 2);
        $value: map-get($widthMap, $width);
      /* ">" means min-width. For example: ">xl" means our condition only applies when the screen is
      larger than whatever the value of xl is. In reverse, "<" corresponds to max-width.
      */
        @if ($sign == ">") {
            @if ($value == null) {
                /* The parameter is a custom value that doesn't exist in the $widthMap, like 1440px, 78rem */
                // First, get the number, i.e. 1440 as an integer, then add 1 to it so that it won't cancel out max-width.
                $integer: to-number($width) + 1;
                // Then get the unit, i.e. px, rem, em.
                $unit: getUnit($width);
                // Finally, concatenate the integer with the unit
                $value: #{$integer} + $unit;
            } @else {
                $value: $value + 1;
            }
            
            @return "(min-width: #{$value})";
        } 
        @return "(max-width: #{$value})";
        
    }
    // The parameter doesn't contain a greater than or less than symbol, which means it is a query for media type, such as print, screen etc.
    @return map-get($mediaTypeMap, $c);
}

@mixin media($args...) {
  $query: "";
  @each $arg in $args {
    $op: "";
    @if ($query != "") {
      $op: " and ";
    }
    $query: $query + $op + translate-media-condition($arg);
  }
  @media #{$query} {
    @content;
  }
}

/* Example:
.container {
  @include ("screen", ">xl") {
    max-width: 1296px;
  }
}
will be compiled to
@media (min-width: 1200px) {
  .container {
    max-width: 1296px;
  }
}

*/