So i wanted to simplify working with breakpoints both for min & max width, custom devices or print so i made this breakpoint mixin, that makes it simple and declarative to note breakpoints.

Here is how to use it, look after this block what you need to start using it today

// Active breakpoints and naming
// giga = 2500px
// mega = 1900px
// kilo = 1360px
// centi = 1024px
// milli = 768px
// nano = 480px
// pico = 320px

// Example on how to use from min-width & to max-width
// @media only screen and (min-width: 0px) and (max-width: 480px) {}
@include breakpoint (0 nano) {
  // Breakpoint styling here
}

// @media only screen and (min-width: 480px) and (max-width: 768px) {}
@include breakpoint (nano milli) {
  // Breakpoint styling here
}

// @media only screen and (min-width: 1024px) and (max-width: 1360px) {}
@include breakpoint (1024 1360) {
  // Breakpoint styling here
}

// @media only screen and (min-width: 768px) and (max-width: 1024px) {}
@include breakpoint (milli 1024) {
  // Breakpoint styling here
}
  

// Example on how to use only min-width or max-width
// @media only screen and (min-width: 768px) {}
@include breakpoint (milli) {
  // Breakpoint styling here
}

// @media only screen and (max-width: 480px) {}
@include breakpoint (-nano) {
  // Breakpoint styling here
}

// Some ofther helpers that might be useful

// Example for using strings:
// @media only screen and (max-width: 700px) {}
@include breakpoint ('max-width: 700px') {
  // Breakpoint styling here
}

// Example for print styling
// @media print {}
@include breakpoint (print) {
  // Breakpoint styling here
}

// Example for iphoneX styling
// Useful for the screen nudge on iphone-x
@include breakpoint (iphoneX) {
  // Breakpoint styling here
}

// Example for iphoneX-portrait styling
// Useful for the screen nudge on iphone-x
@include breakpoint (iphoneX-portrait) {
  // Breakpoint styling here
}

// Example for iphoneX-landscape styling
// Useful for the screen nudge on iphone-x
@include breakpoint (iphoneX-landscape) {
  // Breakpoint styling here
}

Here is the code that make all this sugar possible:

$bp-mega:  2500px;
$bp-mega:  1900px;
$bp-kilo:  1360px;
$bp-centi: 1024px;
$bp-milli:  768px;
$bp-nano:   480px;

$breakpoint-map: (
  giga: (
    $bp-giga
  ),
  mega: (
    $bp-mega
  ),
  kilo: (
    $bp-kilo
  ),
  centi: (
    $bp-centi
  ),
  milli: (
    $bp-milli
  ),
  nano: (
    $bp-nano
  ),
  pico: (
    $bp-pico
  )
);

@function to-string($value) {
  @return inspect($value);
}

/**
   *  First section controls media quries that contains from-to values
   *  if numbers are parsed unitless it will default to px's, if you need to use em's just parse the unit in the end
   *
   *  Example:
    @include breakpoint (0 nano) {
      // @media only screen and (min-width: 0px) and (max-width: 480px) {}
    }
    @include breakpoint (nano milli) {
      // @media only screen and (min-width: 480px) and (max-width: 768px) {}
    }
    @include breakpoint (1024 1360) {
      // @media only screen and (min-width: 1024px) and (max-width: 1360px) {}
    }
    @include breakpoint (milli 1024) {
      // @media only screen and (min-width: 768px) and (max-width: 1024px) {}
    }
  
   *  You can use this very simple and you can turn from min to max width
   *  only by adding dash infront of your breakpoint keyword
   *
   *  Example:
    @include breakpoint (milli) {
      // @media only screen and (min-width: 768px) {}
    }
    @include breakpoint (-nano) {
      // @media only screen and (max-width: 480px) {}
    }
  
   *  There is also support for writing strings, and printable breakpoint
   *
   *  Example:
    @include breakpoint ('max-width: 700px') {
      // @media only screen and (max-width: 700px) {}
    }
    @include breakpoint (print) {
      // @media print {}
    }
   */
@mixin breakpoint($point) {
  @if length($point) > 1 {
    $point1: nth($point, 1);
    $point2: nth($point, 2);

    @if type-of($point1) == 'number' and unitless($point1) {
      $point1: nth($point, 1) + 0px;
    }

    @if type-of($point2) == 'number' and unitless($point2) {
      $point2: nth($point, 2) + 0px;
    }

    @if type-of($point1) == 'number' and type-of($point2) == 'number' {
      @media only screen and (min-width: $point1) and (max-width: $point2) {
        @content;
      }
    } @else if type-of($point1) == 'number' {
      @media only screen and (min-width: $point1) and (max-width: map-get($breakpoint-map, $point2)) {
        @content;
      }
    } @else if type-of($point2) == 'number' {
      @media only screen and (min-width: map-get($breakpoint-map, $point1)) and (max-width: $point2) {
        @content;
      }
    } @else {
      @media only screen and (min-width: map-get($breakpoint-map, $point1)) and (max-width: map-get($breakpoint-map, $point2)) {
        @content;
      }
    }
  } @else {
    @if $point == giga or $point == -giga {
      @if str-index(to-string($point), '-') == 1 {
        @media only screen and (max-width: $bp-giga) {
          @content;
        }
      } @else {
        @media only screen and (min-width: $bp-giga) {
          @content;
        }
      }
    } @else if $point == mega or $point == -mega {
      @if str-index(to-string($point), '-') == 1 {
        @media only screen and (max-width: $bp-mega) {
          @content;
        }
      } @else {
        @media only screen and (min-width: $bp-mega) {
          @content;
        }
      }
    } @else if $point == kilo or $point == -kilo {
      @if str-index(to-string($point), '-') == 1 {
        @media only screen and (max-width: $bp-kilo) {
          @content;
        }
      } @else {
        @media only screen and (min-width: $bp-kilo) {
          @content;
        }
      }
    } @else if $point == centi or $point == -centi {
      @if str-index(to-string($point), '-') == 1 {
        @media only screen and (max-width: $bp-centi) {
          @content;
        }
      } @else {
        @media only screen and (min-width: $bp-centi) {
          @content;
        }
      }
    } @else if $point == milli or $point == -milli {
      @if str-index(to-string($point), '-') == 1 {
        @media only screen and (max-width: $bp-milli) {
          @content;
        }
      } @else {
        @media only screen and (min-width: $bp-milli) {
          @content;
        }
      }
    } @else if $point == nano or $point == -nano {
      @if str-index(to-string($point), '-') == 1 {
        @media only screen and (max-width: $bp-nano) {
          @content;
        }
      } @else {
        @media only screen and (min-width: $bp-nano) {
          @content;
        }
      }
    } @else if $point == pico or $point == -pico {
      @if str-index(to-string($point), '-') == 1 {
        @media only screen and (max-width: $bp-pico) {
          @content;
        }
      } @else {
        @media only screen and (min-width: $bp-pico) {
          @content;
        }
      }
    } @else if $point == iphoneX {
      @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        @content;
      }
    } @else if $point == iphoneX-portrait {
      @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
        @content;
      }
    } @else if $point == iphoneX-landscape {
      @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
        @content;
      }
    } @else if $point == print {
      @media print {
        @content;
      }
    } @else if type-of($point) == 'number' {
      @media only screen and (min-width: $point) {
        @content;
      }
    } @else if str-index($point, max) == 1 or str-index($point, min) == 1 {
      @media only screen and (#{$point}) {
        @content;
      }
    }
  }
}