Generated by SassMeister.com.

SassMeister-input-HTML.html

Hello World

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// Generate show / hide classes based on the $bp map

$bp: (
  eminem: 480px,
  diddy: 600px,
  dre: 768px,
  jayz: 1024px
);

// Iterate of the breakpoint map
@each $name, $width in $bp {

  // Set the max-width 1px less to avoid collisions
  $maxwidth: $width - 1px;

  // Generate the media query
  @media (min-width: $width) {

    // Use widths in the class names for better
    // readability on the front end
    .is-hidden-at-#{$name} {

      // Use !important so the class
      // can be applied anywhere
      display: none !important;
    }
  }

  // Generate the media query
  @media (max-width: $maxwidth) {

    // Use widths in the class names for better
    // readability on the front end
    .is-hidden-upto-#{$name} {

      // Use !important so the class
      // can be applied anywhere
      display: none !important;
    }
  }

}

// A simple media query wrapper
// to access mapped breakpoint values
@mixin at( $desired ) {
  @media (min-width: map-get($bp, $desired)) {
    @content;
  }
}

// A simple media query wrapper
// to access mapped breakpoint values
@mixin upto( $desired ) {
  $maxwidth: map-get($bp, $desired) - 1px;
  @media (max-width: $maxwidth) {
    @content;
  }
}

// Usage
body {
  font-family: sans-serif;
  
  // Min width query
  @include at( diddy ) {
    background-color: #F0f0f0;
  }
  
  // Max with query
  @include upto(dre) {
    font-size: 2rem;
  }
}

SassMeister-output.css

@media (min-width: 480px) {
  .is-hidden-at-eminem {
    display: none !important;
  }
}
@media (max-width: 479px) {
  .is-hidden-upto-eminem {
    display: none !important;
  }
}
@media (min-width: 600px) {
  .is-hidden-at-diddy {
    display: none !important;
  }
}
@media (max-width: 599px) {
  .is-hidden-upto-diddy {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .is-hidden-at-dre {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .is-hidden-upto-dre {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .is-hidden-at-jayz {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .is-hidden-upto-jayz {
    display: none !important;
  }
}
body {
  font-family: sans-serif;
}
@media (min-width: 600px) {
  body {
    background-color: #F0f0f0;
  }
}
@media (max-width: 767px) {
  body {
    font-size: 2rem;
  }
}

SassMeister-rendered.html

Hello World