Cacher is the code snippet organizer for pro developers

$breakpoint = {
  tablet : 640px,
  laptop : 1000px,
  desk : 1260px,
  large : 1600px
}

$media = {
  mobile : "(max-width: "+unit(($breakpoint.tablet - 1), 'px')+")",
  tablet : "(min-width: "+unit($breakpoint.tablet, 'px')+") and (max-width: "+unit(($breakpoint.laptop - 1), 'px')+")",
  laptop : "(min-width: "+unit($breakpoint.laptop, 'px')+") and (max-width: "+unit(($breakpoint.desk - 1), 'px')+")",
  desk  : "(min-width: "+unit($breakpoint.desk, 'px')+") and (max-width: "+unit(($breakpoint.large - 1), 'px')+")",
  large : "(min-width: "+unit($breakpoint.large, 'px')+")"
}
// will produce rules like this
// $media.tablet = "@media (min-width: 640px) and (max-width: 999px)"

// ===
// Usage example
// ===
// html
//   font-size 16px
//   @media $media.mobile
//     font-size 12px

// ===
// Generate visibility classes
// ===
for key, value in $media
  .{key}-shown
    display none !important

  .{key}-hidden
    display block !important


  @media value
    .{key}-shown
      display block !important

    .{key}-hidden
      display none !important

// This will produce
// .mobile-shown { display: none !important; }
// .mobile-hidden { display: none !important; }

// @media (max-width: 639px) {
//   .mobile-shown { display: block !important; }
//   .mobile-hidden { display: none !important; }
// }
// ... and others