Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

// Calculate ems
// ========================================================================== */
//
// @params
//  $value
//  $context
//

@function em($value, $context: $base-font-size) {
  @if unit($value) == '' {
    $value: $value * 1em;
  }
  @if unit($value) == 'em' {
    @return $value;
  }
  @if unit($value) != px {
    $value: px($value);
  }
  @if unit($context) != px {
    $context: px($context);
  }
  @return ($value / $context) * 1em;
}

// Calculate the em value of n baselines
// ========================================================================== */
//
// @params
//  $lines
//  $context
//
@function base-line-calc($lines: 1, $context: false) {
  $calc: $lines * $base-line-em;
  @if $context {
    $calc: em($lines * $base-line-em, em($context));
  }
  @return $calc;
}


// Variables
// ========================================================================== */
$root-typesize   : 16px;
$base-font-size  : $root-typesize;
$base-line-px    : 24px;
$base-line-em    : em($base-line-px);

// 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: 0.75em;
  margin-top: 0.75em; }

h2 {
  font-family: sans;
  font-weight: 300;
  font-size: 32px;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.75em;
  margin-top: 0.75em; }

h3 {
  font-family: sans;
  font-weight: 300;
  font-size: 1.75px;
  font-size: 0.10938rem;
  line-height: 1;
  margin-bottom: 0.75em;
  margin-top: 0.75em; }

h4 {
  font-family: sans;
  font-weight: 300;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0.375em;
  margin-top: 0.375em; }

h5 {
  font-family: sans;
  font-weight: 300;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 0.375em;
  margin-top: 0.375em; }

h6 {
  font-family: sans;
  font-weight: 300;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 0.375em;
  margin-top: 0.375em; }