Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// SassyLists (v2.2.1)
// ----

@import "breakpoint";
@import "SassyLists";


$breakpoint-hi-rez: min-resolution 1.5dppx;
$breakpoint-medium-width: 500px;

$breakpoint-large-width: 800px;

$context-list: ();

@mixin r-breakpoint($query, $id:default){
  $context-list: append($context-list, $id) !global;
  @include breakpoint($query){
    @content;
  }
  $context-list: sl-remove($context-list, sl-last($context-list)) !global;
}

@include r-breakpoint($breakpoint-medium-width, medium-width) {
  
  .Box {
    content: $context-list;
  }
    
  @include r-breakpoint($breakpoint-hi-rez, hi-rez) {
    .Box {
      content: $context-list;
    }
  }
}

SassMeister-output.css

@media (min-width: 500px) {
  .Box {
    content: medium-width;
  }
}
@media (min-width: 500px) and (min-resolution: 1.5dppx), (min-width: 500px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 500px) and (min--moz-device-pixel-ratio: 1.5), (min-width: 500px) and (min-resolution: 144dpi) {
  .Box {
    content: medium-width hi-rez;
  }
}