Cacher is the code snippet organizer for pro developers

<div class="test">
  Utah. Gimme Two!
</div>

/*-- Update: We don't need to turn the values into ems. Breakpoint will do that for us. --*/
/*-- @include breakpoint-set('to ems', true); --*/
/*-- Update: The calculateEm function isn't needed anymore --*/
/*-- Update: Just specify the original values --*/
@media (min-width: 20em) and (max-width: 30em) {
  .test {
    text-decoration: underline;
  }
}

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// ----

@import "breakpoint";
/*-- Update: We don't need to turn the values into ems. Breakpoint will do that for us. --*/
$breakpoint-to-ems: true;
/*-- @include breakpoint-set('to ems', true); --*/

$base_font_size: 16px;

/*-- Update: The calculateEm function isn't needed anymore --*/
@function calculateEm( $pixels )
{
  $emSize: $pixels / $base_font_size * 1;
  @return #{$emSize}em;
}

$a: calculateEm(320px);
$b: calculateEm(480px);

/*-- Update: Just specify the original values --*/
$aa: 320px;
$bb: 480px;

$calculated_range_success: ($a min-width ) ($b max-width);
$calculated_range_fail: $a $b;
$range_success: $aa $bb;
$un_calculatedrange: 20em 30em;

.test
{
    @include breakpoint( $range_success )
    {
      text-decoration:underline;
    }
}

<div class="test">
  Utah. Gimme Two!
</div>