Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="title-1">Title 1</p>
<p class="title-2">Title 2</p>
<p class="title-3">Title 3</p>
<p class="title-4">Title 4</p>
<p class="title-5">Title 5</p>
<p class="title-6">Title 6</p>
<p class="body-copy">Use absolutely no pressure. Just like an angel's wing. Just beat the devil out of it. Put light against light - you have nothing. Put dark against dark - you have nothing. It's the contrast of light and dark that each give the other one meaning. Once you learn the technique, ohhh! Turn you loose on the world; you become a tiger. We have all at one time or another mixed some mud.</p>

SassMeister-input.scss

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

// Made better with some help from here: https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm
// determine rem value for functions
$base-font-size: 16px;
$base-line-height: 1.35;
// rem Function

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

@function px-rem($val: 16, $unit: rem) {
      @return strip-unit(($val/$base-font-size)) + $unit;
}

$__type-scale: (
	5: px-rem(50px),
	4: px-rem(45px),
	3: px-rem(30px),
	2: px-rem(25px),
	1: px-rem(20px),
	0: px-rem(16px),
	-1: px-rem(14px),
	-2: px-rem(12px)
);
$__line-heights: (
	-2: $base-line-height + rem,
	-1: $base-line-height + rem,
	0: $base-line-height + rem,
	1: $base-line-height + rem,
	2: $base-line-height + rem,
	3: $base-line-height + rem,
	4: $base-line-height + rem,
	5: $base-line-height + rem
);

// Type Scale and Vertical Rhythm
@function type-scale($level) {
    @return map-get($__type-scale, $level);
}

@function line-height($level) {
    @return map-get($__line-heights, $level);
}

// Move this mixin to a _mixins.scss file -or- _typography.scss
@mixin type-setting($level: 0, $line-height: 1) {
  font-size: type-scale($level);
  line-height: $line-height;
  margin-top: 0;
  margin-bottom: line-height($level);
}


.title-1 { @include type-setting(5)}
.title-2 { @include type-setting(4)}
.title-3 { @include type-setting(3)}
.title-4 { @include type-setting(2)}
.title-5 { @include type-setting(1)}
.title-6 { @include type-setting(0)}
.body-copy { @include type-setting(0, 1.35)}

.test { height: px-rem(160px)};

SassMeister-output.css

.title-1 {
  font-size: 3.125rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.title-2 {
  font-size: 2.8125rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.title-3 {
  font-size: 1.875rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.title-4 {
  font-size: 1.5625rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.title-5 {
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.title-6 {
  font-size: 1rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.body-copy {
  font-size: 1rem;
  line-height: 1.35;
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.test {
  height: 10rem;
}

SassMeister-rendered.html

<p class="title-1">Title 1</p>
<p class="title-2">Title 2</p>
<p class="title-3">Title 3</p>
<p class="title-4">Title 4</p>
<p class="title-5">Title 5</p>
<p class="title-6">Title 6</p>
<p class="body-copy">Use absolutely no pressure. Just like an angel's wing. Just beat the devil out of it. Put light against light - you have nothing. Put dark against dark - you have nothing. It's the contrast of light and dark that each give the other one meaning. Once you learn the technique, ohhh! Turn you loose on the world; you become a tiger. We have all at one time or another mixed some mud.</p>