Cacher is the code snippet organizer for pro developers

.font-sm {
  font-size: 16.8px;
  line-height: 1.92619;
}

@media (min-width: 680px) {
  .font-sm {
    font-size: 16.8px;
    line-height: 1.92619;
  }
}
@media (min-width: 1100px) {
  .font-sm {
    font-size: 16.8px;
    line-height: 1.92619;
  }
}
.font-p {
  font-size: 20px;
  line-height: 1.618;
}

@media (min-width: 680px) {
  .font-p {
    font-size: 20px;
    line-height: 1.618;
  }
}
@media (min-width: 1100px) {
  .font-p {
    font-size: 20px;
    line-height: 1.618;
  }
}
.font-hero {
  padding-top: 0.9631em;
  padding-bottom: 0.9631em;
}
@media (min-width: 680px) {
  .font-hero {
    padding-top: 0.809em;
    padding-bottom: 0.809em;
  }
}
@media (min-width: 1100px) {
  .font-hero {
    padding-top: 0.67983em;
    padding-bottom: 0.67983em;
  }
}

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

// TO-DO
// Is it better to do all the $fsize per $bp? or $bp per $fsize? 
// ↑ All $bp per $fsize is consistent w/other code in this gist.
// ↑ Weird - @resp-sizes isn't working...
// Add options for per-breakpoint $main-font & $rhythm?
// Use abs() to make $offset simpler?

// CONFIGURE ME

// If you need a "small" font-size (one scale step below your default), set $startsmall: true;
$startsmall: true;

// Set your default font-size here:
$main-font: 20px;

// Set your paragraph line-height (vertical rhythm) here:
$rhythm: 1.618;

// Put all your individual font-sizes in this list:
$fsizes: (
	sm, p, bq, ssh, sh, h, hero
);

// Set your breakpoints in a map:
// Feel free to use any unit you like (px vs ems)
$breakpoints: (
  small: 320px,
  medium: 680px,
  large: 1100px,
  xlarge: 1300px
);

// DON'T EDIT THIS

// Size of a musical half-step
$half: 466.16 / 440;
// All the intervals in an octave
$intervals: (
	tonic: pow($half,0),
	half: pow($half,1),
	whole: pow($half,2),
	mthird: pow($half,3),
	third: pow($half,4),
	fourth: pow($half,5),
	afourth: pow($half,6),
	fifth: pow($half,7),
	msixth: pow($half,8),
	sixth: pow($half,9),
	mseventh: pow($half,10),
	seventh: pow($half,11),
	octave: pow($half,12)
);

// Common musical scales with 1-7 intervals
$octave: ( tonic );
$perfect-fourth: ( tonic, fourth );
$tritone: ( tonic, afourth );
$perfect-fifth: ( tonic, fifth );
$major-triad: ( tonic, third, fifth );
$minor-triad: ( tonic, mthird, fifth );
$quad: ( tonic, mthird, afourth, sixth );
$major-minor-seventh: ( tonic, third, fifth, mseventh );
$pentatonic: ( tonic, whole, third, fifth, sixth );
$hexatonic: ( tonic, whole, third, fourth, fifth, sixth );
$whole-tone: ( tonic, whole, third, afourth, msixth, mseventh );
$augmented: ( tonic, mthird, third, fifth, msixth, seventh );
$blues: ( tonic, mthird, fourth, afourth, fifth, mseventh );
$prometheus: ( tonic, whole, third, afourth, sixth, mseventh );
$major-scale: ( tonic, whole, third, fourth, fifth, sixth, seventh );
$minor-scale: ( tonic, whole, mthird, fourth, fifth, msixth, seventh );

// Get the distance between notes in an interval
@function int($name) {
	@return map-get($intervals, $name);
}

// Round a number
@function rd($num) {
  @return round( $num * 10 ) / 10;
}

// Calculate font-size based on $fsize name & current $scale
@function loop-pos($fs, $scale) {
  $curr-size: index($fsizes, $fs);
  $loop: 0;
	@if $startsmall == true {
		$curr-size: $curr-size - 1;
		@if $curr-size == 0 {
		  $loop: -1;
		}
	}
	@while $curr-size > length($scale) {
		$curr-size: $curr-size - length($scale);
		$loop: $loop + 1;
	}
	@if $curr-size == 0 {
	  $curr-size: length($scale);
	}
	$actual-font: rd( $main-font * pow( 2, $loop ) * int( nth( $scale, $curr-size) ) );

	@return $actual-font;
}

// Function to assign a font-size & line-height to each label 
// in the $fsizes variable based on a chosen scale
@mixin make-sizes($fs, $scale) {
	$actual-font: loop-pos($fs, $scale);
	$line-height: $main-font / $actual-font * $rhythm;
	@if $line-height < 1 {
	  $line-height: $line-height + $line-height;
	}
	font-size: $actual-font;
	line-height: $line-height;
}

// Generate margin / padding based on baseline rhythm
@mixin scale-space($type,$fs,$t:false,$r:false,$b:false,$l:false){
  @each $bp, $scale in $bp-scales {
    @include bp($bp) {
      $actual-font: loop-pos($fs, $scale);
      $calc-rhythm: $main-font * $rhythm;
      $em-value: $calc-rhythm / $actual-font;
      @if $t != false {
    		#{$type}-top: ( $t * $em-value ) * 1em;		
    	}
    	@if $r != false {
    		#{$type}-right: ( $r * $em-value ) * 1em;
    	}
    	@if $b != false {
    		#{$type}-bottom: ( $b * $em-value ) * 1em;
    	}
    	@if $l != false {
    		#{$type}-left: ( $l * $em-value ) * 1em;
    	}
    }
  }
}
@mixin scale-margin($fs,$t,$r,$b,$l){
  @include scale-space('margin',$fs,$t,$r,$b,$l);
}
@mixin scale-padding($fs,$t,$r,$b,$l){
  @include scale-space('padding',$fs,$t,$r,$b,$l);
}

// Function to manually generate font sizes for a single $scale
@mixin generate-sizes($scale) {
  @each $fsize in $fsizes {
    .font-#{$fsize} {
      @include make-sizes($fsize, $scale);
    }
  } 
};

// Breakpoint MQ function
@mixin bp($name) {
  @if $name == 'default' {
    @content;
  }
  @if not index(map-keys($breakpoints), $name) {
    @warn "Invalid breakpoint `#{$name}`.";
  }
  @else {
    @media (min-width: map-get($breakpoints, $name)) {
      @content;
    }
  }
}

// Function to loop through all $fsizes, assign all necessary MQs for each
@mixin resp-sizes() {
  @each $fsize in $fsizes {
    @each $bp, $scale in $bp-scales {
      @include bp($bp) {
        %#{$fsize} {
          @include make-sizes($fsize, $scale);
        }
      }
    }
  } 
};

// Alt function to loop through all $breakpoints, assign all necessary font-sizes for each
@mixin bp-sizes() {
  @each $bp, $scale in $bp-scales {
    @include bp($bp) {
      @each $fsize in $fsizes {
        .#{$fsize} {
          @include make-sizes($fsize, $scale);
        }
      }
    }
  } 
};

// GO AHEAD AND EDIT THIS

// Assign a scale to each breakpoint.
// NOTE: This is mobile first, so the first $scale will be assigned without a MQ. 
// Subsequent breakpoints will draw MQ values from $breakpoints map.
$bp-scales: (
  default: $hexatonic,
  medium: $pentatonic,
  large: $quad
);


@include resp-sizes();

.font-hero {
  @include scale-padding(hero,1,false,1,false);
}
.font-sm {
  @extend %sm !optional;
}
.font-p {
  @extend %p !optional;
}