Generated by SassMeister.com, the Sass playground.

SassMeister-input.scss

// SCRATCH

// typo source definitions
@font-face {}

$base-family: Helvetica;
$heading-family: Georgia;

// basic typo sizing
$base-font-size:    16px !default;
$base-line-height:  24px !default;
$heading-font-sizes: 10px 14px 18px 20px 24px 28px;

// basic typo styling
%base-font-style {
    font-family: sans-serif;    
}

%heading-font-style {
    font-family: serif;
}

@mixin font-size($font-size, $line-height:true){
    font-size:$font-size;
    font-size:($font-size / $base-font-size)*1rem;
    @if $line-height == true{
        line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
    }
}

// html and body setup
html {}
body {}

// heading setup
#{enumerate("h",1,6,"")},#{enumerate(".h",1,6,"")} { @extend %heading-font-style; }
@for $n from 1 through 6 {
    h#{$n},.h#{$n} {
        @include font-size(nth($heading-font-sizes,length($heading-font-sizes) + 1 - $n));
    }
}

SassMeister-output.css

@font-face {}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: serif;
}

h1, .h1 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.71429;
}

h2, .h2 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1;
}

h3, .h3 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
}

h4, .h4 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.33333;
}

h5, .h5 {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.71429;
}

h6, .h6 {
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 2.4;
}