Cacher is the code snippet organizer for pro developers

section {
  margin-bottom: 15em;
  font-size: 1em;
}
@media (min-width: 960px) {
  section {
    margin-bottom: 8.33em;
  }
}
@media (min-width: 1200px) {
  section {
    margin-bottom: 5em;
  }
}
@media (min-width: 480px) {
  section {
    font-size: 1.5em;
  }
}
@media (min-width: 960px) {
  section {
    font-size: 3em;
  }
}

div {
  font-size: 1em;
}
@media (min-width: 480px) {
  div {
    font-size: 1.5em;
  }
}
@media (min-width: 960px) {
  div {
    font-size: 3em;
  }
}

h1 {
  padding-left: 2.5em;
}
@media (min-width: 960px) {
  h1 {
    padding-left: 1.5em;
  }
}

p {
  margin-bottom: 0.6em;
}
@media (min-width: 480px) {
  p {
    margin-bottom: 0.78em;
  }
}
@media (min-width: 960px) {
  p {
    margin-bottom: 1.33em;
  }
}
@media (min-width: 1200px) {
  p {
    margin-bottom: 1.6em;
  }
}

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

// TODO:
// 1. Allow array of numbers for $value-start & $value end (for margin, padding, etc)
// 1a. Deal with auto, none, inherit in that list?
// 2. Change mixin to process maps full of data: allowing to scale several properties in a 
//    single selector w/o generating a ton of extraneous MQs

// Map containing breakpoints for project
$breakpoints: (
  small: 320px,
  medium: 480px,
  large: 960px,
  xlarge: 1200px
);

// Just a helper function to get $breakpoints data
@function get_bp($label) {
  @return map-get($breakpoints, $label);
}

// Helper function for rounding math
@function round-num($num) {
  @return round($num*100)/100;
}

// My usual breakpoint @mixin
@mixin bp($name) {
	@if not map-has-key($breakpoints, $name) {
		@warn "Invalid breakpoint `#{$name}`.";
	} @else {
		@if map-get($breakpoints, $name) {
			@media (min-width: map-get($breakpoints, $name)) {
				@content;
			}
		} @else {
			@content;
		}
	}
}

@mixin spread-value($property, $value-start, $value-end, $bp-start: small, $bp-end: xlarge) {

  // Validate that $value-start & $value-end are "spreadable" values (i.e., numbers)
  @if type-of($value-start) != number or type-of($value-end) != number {
    @warn "Either $value-start or $value-end is not a number: `#{$value-start}` | `#{$value-end}`"  
  } @else {
    
    // Output the default value for the property
    #{$property}: #{$value-start};
  
    // Get the distance between the start & end values / start & end breakpoints
    $value-distance: $value-end - $value-start;
    $bp-distance: get_bp($bp-end) - get_bp($bp-start);
    
    // Create a list of the keys from the $breakpoints mixin to use index/nth list functions
    $bp-keys: map-keys($breakpoints);
    
    // Initialize a new list: will contain the list of breakpoints to be used
    $bp-list: ();
    
    // Start the loop with the breakpoint after $bp-start & end it at $bp-end
    $i: index($bp-keys, $bp-start);
    @while $i <= length($bp-keys) and nth($bp-keys, $i) != $bp-end {
      $i: $i + 1;
    
      // $bp-list becomes a list of all the $breakpoints keys after $bp-start & before $bp-end
      $bp-list: join($bp-list, nth($bp-keys, $i));
    }
    
    // Loop through $bp-list:
    @each $key in $bp-list {
      
      // Find out how far from $bp-start this $bp is, divide by distance from $bp-start to $bp-end
      $percentage: ( get-bp($key) - get_bp($bp-start) ) / $bp-distance;
      
      // Output media query wrapper
      @include bp($key) {
        
        // Property is value scaled to the same distance as breakpoint
        #{$property}: round-num( ( $value-distance * $percentage ) + $value-start );
      }
    }
  }
}

section {
  @include spread-value(margin-bottom, 15em, 5em, medium, xlarge);
  @include spread-value(font-size, 1em, 3em, small, large);
}
div {
  @include spread-value(font-size, 1em, 3em, small, large);
}
h1 {
  @include spread-value(padding-left, 2.5em, 1.5em, medium, large);
}
p {
  @include spread-value(margin-bottom, .6em, 1.6em);
}