Creates media rules based on proportional scaling, with clamping to nearest to avoid half-pixels and keep baseline intact

mixin-scale-value.scss

/**
  scale-value

  Creates @media rules to scale a value between two values based on screen sizes
  $value-s will be active on the smallest screen and below
  $value-l will be active on the largest screen and above
  $clamp-to-nearest determines the steps of scaling 
    (eg. "1" = round to closest whole value, "4" = round to closest number devisable by 4)

  @param $value-name The value that will be changes (eg. 'font-size' or 'padding-bottom')
  @param $val-s The smallest value to use
  @param $val-l The largest value to use
  @param $clamp-to-nearest Determines the rounding of the value
  @param $steps The amount of steps to create
  @param $screen-s The smallest screen-size
  @param $screen-l The largest screen-size

  Codepen example: http://codepen.io/wiledal/pen/vxVGeY
*/

$max-screen: 1024px;
$min-screen: 600px;

@mixin scale-value($value-name, $val-s, $val-l, $clamp-to-nearest: 1, $steps: 4, $screen-s: $min-screen, $screen-l: $max-screen) {
  $split: $screen-l - $screen-s;
  $val-split: $val-l - $val-s;
  
  #{$value-name}: $val-l;
  
  @for $i from $steps through 0 {
    @media (max-width: $screen-s + $split / $steps * $i) {
      $mul: round(($val-s + $val-split / $steps * $i) / $clamp-to-nearest) * $clamp-to-nearest;
      #{$value-name}: $mul;
    }
  }
}

/*
  Example
*/
.thing {
  // Proportional scaling of font-size
  @include scale-value(font-size, 24px, 56px);
  
  // Proportional scaling of line-heights, always complying with a baseline of 4px
  @include scale-value(line-height, 32px, 64px, 4);
}