Generated by SassMeister.com.

SassMeister-input.scss

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

@import "include-media";

$breakpoints:(
    'small': 400px,
    'large': 1200px
);

$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('to', $breakpoint-name);
  }
}

SassMeister-output.css

@media (min-width: 400px) and (max-width: 1199px) {
  .hidden--for-small {
    display: none;
  }
}

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

@media (max-width: 399px) {
  .hidden--to-small {
    display: none;
  }
}

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

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

@media (max-width: 1199px) {
  .hidden--to-large {
    display: none;
  }
}