Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// libsass (v3.5.0.beta.2)
// ----

$font-size-base: 16px !default;
$font-fallback-type: '' !default;

@function get-relative-font-size($actual, $relative: $font-size-base, $unitType: 'rem') {
    @if $unitType == 'rem' {
        @return #{($actual / $font-size-base)}rem;
    } @else {
        @return ceil(percentage($actual / $relative));
    }
}

$headers: (
    alpha: (
        font-size: get-relative-font-size(36px),
        font-weight: 700,
    ),
    beta: (
        font-size: get-relative-font-size(24px),
        font-weight: 700,
    ),
);

@mixin font-size($actual, $relative: $font-size-base) {
  @if $font-fallback-type != '' {
    @if $font-fallback-type == '%' {
       font-size: get-relative-font-size($actual, $relative, $font-fallback-type);
    } @else {
      font-size: $actual;
    }
  }
  font-size: get-relative-font-size($actual, $relative, 'rem');
}

@mixin getHeader($header) {
    @if (map-has-key($headers, $header)) {
        $styles: map-get($headers, $header);
        @each $property, $value in $styles {
            #{$property}: $value;
        }
    } @else {
        @warn 'No styles found for #{$header} header';
    }
}

.title {
  @include getHeader('alpha');
}
.byline {
  @include getHeader('beta');
}
p {
  @include font-size(18px);
}

SassMeister-output.css

.title {
  font-size: 2.25rem;
  font-weight: 700;
}

.byline {
  font-size: 1.5rem;
  font-weight: 700;
}

p {
  font-size: 1.125rem;
}