z3bbster · August 29, 2015 14:13 · Jan 6, 2015 · Jan 6, 2015 · Jan 6, 2015
diff --git a/spread.sass b/spread.sass
@@ -68,7 +68,7 @@
 //   $property:      CSS property to set
 //   $property-min:  min value of the property
 //   $property-max:  max value of the property
-//   $dimension:     media query dimension - either min-width or min-height
+//   $dimension:     media query dimension - min-width, min-height, max-width, max-height
 //   $dimension-min: first media query of the chosen dimension
 //   $dimension-max: final media query of the chosen dimension
 //   $default-value: true/false (defaults to true).

diff --git a/spread.sass b/spread.sass
@@ -65,22 +65,26 @@
 
 
 // spreads a property value from min to max across media queries
-//   $property:       CSS property to set
-//   $property-min:   min value of the property
-//   $property-max:   max value of the property
-//   $dimension:      media query dimension - either min-width or min-height
-//   $dimension-min:  first media query of the chosen dimension
-//   $dimension-max:  final media query of the chosen dimension
-//   $default-to-min: true/false. should min value be included outside of media query?
-//   $precision:      how many pixels each media query should cover
-//   $ease:           easing function to use when calculating value
-//                    helpful for fine-tuning some widths in the mid-range
-=spread($property, $property-min, $property-max, $dimension: min-width, $dimension-min: 400px, $dimension-max: 1400px, $default-to-min: true, $precision: 50px, $ease: linear)
+//   $property:      CSS property to set
+//   $property-min:  min value of the property
+//   $property-max:  max value of the property
+//   $dimension:     media query dimension - either min-width or min-height
+//   $dimension-min: first media query of the chosen dimension
+//   $dimension-max: final media query of the chosen dimension
+//   $default-value: true/false (defaults to true).
+//                   Should a default value (min for min-width/height,
+//                   max for max-width/height) be included outside the query?
+//   $precision:     how many pixels each media query should cover
+//   $ease:          easing function to use when calculating value
+//                   helpful for fine-tuning some widths in the mid-range
+=spread($property, $property-min, $property-max, $dimension: min-width, $dimension-min: 400px, $dimension-max: 1400px, $default-value: true, $precision: 50px, $ease: linear)
   $total-iterations: abs(strip-units(ceil(($dimension-max - $dimension-min) / $precision))) - 1
+  $max-dimension:    $dimension == max-width or $dimension == max-height
 
-  @if $default-to-min
-    #{$property}: $property-min
+  @if $default-value
+    #{$property}: if($max-dimension, $property-max, $property-min)
 
   @for $iteration from 0 through $total-iterations
+    $iteration: if($max-dimension, $total-iterations - $iteration, $iteration)
     @media (#{$dimension}: $dimension-min + ($iteration * $precision))
       #{$property}: ease($iteration, $property-min, $property-max - $property-min, $total-iterations, $ease)
diff --git a/spread.sass b/spread.sass
@@ -0,0 +1,86 @@
+// strip-units required by spread mixin
+// http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
+@function strip-units($number)
+  @return $number / ($number * 0 + 1)
+
+
+// pow and sqrt required by ease function
+// adapted from https://github.com/at-import/Sassy-math/blob/master/sass/math.scss
+@function pow($base, $exponent)
+  $value: $base
+  @if $exponent > 1
+    @for $i from 2 through $exponent
+      $value: $value * $base
+  @if $exponent < 1
+    @for $i from 0 through -$exponent
+      $value: $value / $base
+  @return $value
+
+@function sqrt($number)
+  $root: 4
+  @for $i from 1 through 50
+    $root: $root - (pow($root, 2) - $number) / (2 * $root)
+  @return $root
+
+
+// adapted from http://www.kirupa.com/forum/showthread.php?378287-Robert-Penner-s-Easing-Equations-in-Pure-JS-%28no-jQuery%29
+@function ease($iteration, $start-value, $change, $total-iterations, $ease)
+  $progress: $iteration / $total-iterations
+
+  // value increases evenly
+  @if $ease == linear
+    @return $change * $progress + $start-value
+
+  // value increases on a curve, accelerating
+  @if $ease == in-quad
+    @return $change * $progress * $progress + $start-value
+
+  // value increases on a curve, decelerating
+  @if $ease == out-quad
+    @return -$change * $progress * ($progress - 2) + $start-value
+
+  // value accelerates sharply
+  @if $ease == in-cubic
+    @return $change * pow($progress, 3) + $start-value
+
+  // value decelerates sharply
+  @if $ease == out-cubic
+    @return $change * (pow($progress - 1, 3) + 1) + $start-value
+
+  // value accelerates more sharply
+  @if $ease == in-quart
+    @return $change * pow($progress, 4) + $start-value
+
+  // value decelerates more sharply
+  @if $ease == out-quart
+    @return -$change * (pow($progress - 1, 4) - 1) + $start-value
+
+  // value accelerates very sharply
+  @if $ease == in-quint
+    @return $change * pow($progress, 5) + $start-value
+
+  // value decelerates very sharply
+  @if $ease == out-quint
+    @return $change * (pow($progress - 1, 5) + 1) + $start-value
+
+
+// spreads a property value from min to max across media queries
+//   $property:       CSS property to set
+//   $property-min:   min value of the property
+//   $property-max:   max value of the property
+//   $dimension:      media query dimension - either min-width or min-height
+//   $dimension-min:  first media query of the chosen dimension
+//   $dimension-max:  final media query of the chosen dimension
+//   $default-to-min: true/false. should min value be included outside of media query?
+//   $precision:      how many pixels each media query should cover
+//   $ease:           easing function to use when calculating value
+//                    helpful for fine-tuning some widths in the mid-range
+=spread($property, $property-min, $property-max, $dimension: min-width, $dimension-min: 400px, $dimension-max: 1400px, $default-to-min: true, $precision: 50px, $ease: linear)
+  $total-iterations: abs(strip-units(ceil(($dimension-max - $dimension-min) / $precision))) - 1
+
+  @if $default-to-min
+    #{$property}: $property-min
+
+  @for $iteration from 0 through $total-iterations
+    @media (#{$dimension}: $dimension-min + ($iteration * $precision))
+      #{$property}: ease($iteration, $property-min, $property-max - $property-min, $total-iterations, $ease)
No results found