Smooth CSS property distribution with media queries

distribute.sass

=distribute($property, $min, $max, $start, $end, $precision, $metric)

  #{$property}: $min

  // get the range we're operating on
  $range: $end - $start

  // get the number of iterations we need to run by seeing how precise we should be
  $loops: strip-units(ceil($range / $precision)) - 1

  // get the amount the property should be changing with each loop
  $property_increment: ($max - $min) / $loops

  @for $i from 1 through $loops

    $breakpoint: $metric $start + ($i * $precision)

    // breakpoint is the start value plus the precision amount
    +breakpoint($breakpoint)

      // set the property to it's min + the number of increments to add
      #{$property}: $min + ($property_increment * $i)
      
=dist-height($property, $min, $max)
  +distribute($property, $min, $max, $start: 400px, $end: 1400px, $precision: 50, $metric: min-height)
  
=dist-width($property, $min, $max)
  +distribute($property, $min, $max, $start: 400px, $end: 1400px, $precision: 100, $metric: min-width)