Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$root-typesize   : 16px;

// Mixin - Font-size rem
// ========================================================================== */
//
// @params
//  $px
//  $root-px
//

@mixin fontsize-rem($px, $root-px: $root-typesize) {
  font-size: $px;
  font-size: #{$px / $root-px}rem;
}

// ==========================================================================
// Components Atoms - Headings
// ========================================================================== */

//////////////////////////////
// Header Element Default Variables
// see ~/scss/00-global/02-variables/_typography.scss
// for final 02-variables
$heading-sizes: 36px 32px 1.75px 24px 20px 16px !default;
$heading-line-heights: 1 1 1 1 1 1 !default;
$font-headline: sans !default;
//////////////////////////////


// Mixin - Heading Base
// ========================================================================== */
@mixin heading-base() {
  font: {
    family: $font-headline;
    weight: 300;
  }
}

// Mixin - Heading Size
// ========================================================================== */
//
// @params
//  $size
//  $line-height
//
@mixin heading-size($size, $line-height: false) {
  @include fontsize-rem($size);
  @if $line-height {
    line-height: $line-height;
  }
}

// Mixin - H1
// ========================================================================== */
@mixin h1() {
  @include heading-base();
  @include heading-size(nth($heading-sizes, 1), nth($heading-line-heights, 1));
  margin-bottom: base-line-calc(0.5, nth($heading-sizes, 1));
  margin-top: base-line-calc(0.5, nth($heading-sizes, 1));
}

// Mixin - H2
// ========================================================================== */
@mixin h2() {
  @include heading-base();
  @include heading-size(nth($heading-sizes, 2), nth($heading-line-heights, 2));
  margin-bottom: base-line-calc(0.5, nth($heading-sizes, 2));
  margin-top: base-line-calc(0.5, nth($heading-sizes, 2));
}

// Mixin - H3
// ========================================================================== */
@mixin h3() {
  @include heading-base();
  @include heading-size(nth($heading-sizes, 3), nth($heading-line-heights, 3));
  margin-bottom: base-line-calc(0.5, nth($heading-sizes, 3));
  margin-top: base-line-calc(0.5, nth($heading-sizes, 3));
}

// Mixin - H4
// ========================================================================== */
@mixin h4() {
  @include heading-base();
  @include heading-size(nth($heading-sizes, 4), nth($heading-line-heights, 4));
  margin-bottom: base-line-calc(0.25, nth($heading-sizes, 4));
  margin-top: base-line-calc(0.25, nth($heading-sizes, 4));
}

// Mixin - H5
// ========================================================================== */
@mixin h5() {
  @include heading-base();
  @include heading-size(nth($heading-sizes, 5), nth($heading-line-heights, 5));
  margin-bottom: base-line-calc(0.25, nth($heading-sizes, 5));
  margin-top: base-line-calc(0.25, nth($heading-sizes, 5));
}

// Mixin - H6
// ========================================================================== */
@mixin h6() {
  @include heading-base();
  @include heading-size(nth($heading-sizes, 6), nth($heading-line-heights, 6));
  margin-bottom: base-line-calc(0.25, nth($heading-sizes, 6));
  margin-top: base-line-calc(0.25, nth($heading-sizes, 6));
}

// Heading Element Styles
h1 {
  @include h1();
}
h2 {
  @include h2();
}
h3 {
  @include h3();
}
h4 {
  @include h4();
}
h5 {
  @include h5();
}
h6 {
  @include h6();
}

SassMeister-output.css

h1 {
  font-family: sans;
  font-weight: 300;
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: base-line-calc(0.5, 36px);
  margin-top: base-line-calc(0.5, 36px);
}

h2 {
  font-family: sans;
  font-weight: 300;
  font-size: 32px;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: base-line-calc(0.5, 32px);
  margin-top: base-line-calc(0.5, 32px);
}

h3 {
  font-family: sans;
  font-weight: 300;
  font-size: 1.75px;
  font-size: 0.109375rem;
  line-height: 1;
  margin-bottom: base-line-calc(0.5, 1.75px);
  margin-top: base-line-calc(0.5, 1.75px);
}

h4 {
  font-family: sans;
  font-weight: 300;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: base-line-calc(0.25, 24px);
  margin-top: base-line-calc(0.25, 24px);
}

h5 {
  font-family: sans;
  font-weight: 300;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: base-line-calc(0.25, 20px);
  margin-top: base-line-calc(0.25, 20px);
}

h6 {
  font-family: sans;
  font-weight: 300;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: base-line-calc(0.25, 16px);
  margin-top: base-line-calc(0.25, 16px);
}