Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@import "include-media";

$breakpoints:(
    'bp1': 375px,
    'bp2': 580px,
    'bp3': 768px,
    'bp4': 1024px
);

$num-breakpoints: length($breakpoints);

@mixin hidden($type, $breakpoint) {
  .hidden--#{$type}-#{$breakpoint} {
    display: none;
  }
}

@for $i from 1 through $num-breakpoints {
  $breakpoint: nth($breakpoints, $i);
  $breakpoint-name: nth($breakpoint, 1);
  
  // For
  @if $i == $num-breakpoints {
    @include media('>=#{$breakpoint-name}') {
      @include hidden('for', $breakpoint-name);
    }
  } @else {
    $next-breakpoint: nth($breakpoints, $i + 1);
    $next-breakpoint-name: nth($next-breakpoint, 1);
    
    @include media('>=#{$breakpoint-name}', '<#{$next-breakpoint-name}') {
      @include hidden('for', $breakpoint-name);
    }
  }
  
  // From
  @include media('>=#{$breakpoint-name}') {
    @include hidden('from', $breakpoint-name);
  }
  
  // To
  @include media('<#{$breakpoint-name}') {
    @include hidden('upto', $breakpoint-name);
  }
}

SassMeister-output.css

@media (min-width: 375px) and (max-width: 579px) {
  .hidden--for-bp1 {
    display: none;
  }
}

@media (min-width: 375px) {
  .hidden--from-bp1 {
    display: none;
  }
}

@media (max-width: 374px) {
  .hidden--upto-bp1 {
    display: none;
  }
}

@media (min-width: 580px) and (max-width: 767px) {
  .hidden--for-bp2 {
    display: none;
  }
}

@media (min-width: 580px) {
  .hidden--from-bp2 {
    display: none;
  }
}

@media (max-width: 579px) {
  .hidden--upto-bp2 {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hidden--for-bp3 {
    display: none;
  }
}

@media (min-width: 768px) {
  .hidden--from-bp3 {
    display: none;
  }
}

@media (max-width: 767px) {
  .hidden--upto-bp3 {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hidden--for-bp4 {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hidden--from-bp4 {
    display: none;
  }
}

@media (max-width: 1023px) {
  .hidden--upto-bp4 {
    display: none;
  }
}