Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$VIEWPORT--HAND_START: 320px;
$VIEWPORT--HAND_END: 480px;

$BP--WITHIN--HAND: "(min-width: #{$VIEWPORT--HAND_START}) and (max-width: #{$VIEWPORT--HAND_END})";

@mixin media-query ($MQ) {
  @media only screen and #{$MQ} {
    @content;
  }
}

.box--within--hand {
  // @media only screen and (min-width: $VIEWPORT--HAND_START) and (max-width: $VIEWPORT--HAND_END) {
  //   font-size: 20px;
  // }
  @include media-query($BP--WITHIN--HAND) {
    padding: 2rem;
  }
}

SassMeister-output.css

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .box--within--hand {
    padding: 2rem;
  }
}