Cacher is the code snippet organizer for pro developers

/* ==========================
	  Headings
   ========================== */
h1, .h1 {
  font-family: "NeueHaasGroteskDisp Pro Lt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-size: 4rem;
  font-weight: 200;
}
@media (max-width: 62em) {
  h1, .h1 {
    font-size: 35px;
    font-size: 3.5rem;
  }
}
@media (max-width: 40em) {
  h1, .h1 {
    font-size: 30px;
    font-size: 3rem;
  }
}

h2, .h2 {
  font-family: "NeueHaasGroteskDisp Pro Lt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: 200;
}
@media (max-width: 62em) {
  h2, .h2 {
    font-size: 28px;
    font-size: 2.8rem;
  }
}
@media (max-width: 40em) {
  h2, .h2 {
    font-size: 24px;
    font-size: 2.4rem;
  }
}

h3, .h3 {
  font-family: "NeueHaasGroteskDisp Pro Lt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 100;
}
@media (max-width: 62em) {
  h3, .h3 {
    font-size: 21px;
    font-size: 2.1rem;
  }
}
@media (max-width: 40em) {
  h3, .h3 {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

h4, .h4 {
  font-family: "NeueHaasGroteskDisp Pro Lt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 200;
}

h5, .h5 {
  font-family: "NeueHaasGroteskDisp Pro Lt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 200;
}

h6, .h6 {
  font-family: "NeueHaasGroteskDisp Pro Lt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 100;
}

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// ----

// Breakpoints
$bp-big: 68.75em;
$bp-medium: 62em;
$bp-small: 40em;

// Breakpoint
@mixin bp($point) {
  @if $point == bp-medium {
    @media (max-width: $bp-medium) { @content; }
  }
  @else if $point == bp-small {
    @media (max-width: $bp-small)  { @content; }
  }
}

// Font Size
@mixin font-size($size) {
  font-size: $size * 1px;
  font-size: $size * 0.1rem;
}

$heading-list: (
  h1   40   200,
  h2   32   200,
  h3   24   100,
  h4   20   200,
  h5   18   200,
  h6   18   100
);

$heading-font: 'NeueHaasGroteskDisp Pro Lt', 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* ==========================
	  Headings
   ========================== */
$i: 1;
@each $value in $heading-list {
  #{nth($value, 1)},.#{nth($value, 1)} {
    font-family: $heading-font;
    @include font-size(nth($value, 2));
    font-weight: nth($value, 3);
    // how can I loop through only h1 - h3 to make responsive sizes?
    @if $i <= 3 {
      @include bp(bp-medium) {
        @include font-size(nth($value, 2) * .875)
      }
      @include bp(bp-small) {
        @include font-size(nth($value, 2) * .75)
      }
    }
  }
  $i: $i + 1;
}