Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

$base-font-size: 16;
// Set the line height multiplier to calculate default line-height (in px and rem)
$line-height-multiplier: 1.5;

$font-size: (
    xs: 0.625,  // 10px @ 16px
    s: 0.75,    // 12px @ 16px
    m: 0.875,   // 14px @ 16px
    l: 1,       // 16px @ 16px
    xl: 1.125,  // 18px @ 16px
    xl2: 1.5    // 24px @ 16px
);

@function size($size, $unit, $multiplier:'', $unitless:false) {
    // $size accepts
    // • a value from font-size map,
    // • a unitless value (treated as rem)
    // • a px value
    // $unit accepts
    // • px or rem
    // $multiplier accepts
    // • int/decimal
    // (only applicable when no $size is supplied)
    // $unitless accepts
    // • bool
    // Returns
    // • size in rem with px fallback
    // or if $unitless
    // • $size

    @if $unitless == true {
        @return $size;
    } @else {
        @if $size == "" {
            @if $multiplier != '' {
                // Work out rem from px value using multiplier
                @if $unit == px {
                    @return ($base-font-size * $multiplier) + px;
                } @else {
                    @return ((($base-font-size * $multiplier) / ($base-font-size * 0 + 1)) / $base-font-size) + rem;
                }
            } @else {
                // Work out rem from px value
                @if $unit == px {
                    @return $base-font-size + px;
                } @else {
                    @return (($base-font-size / ($base-font-size * 0 + 1)) / $base-font-size) + rem;
                }
            }
        
        } @else {
            $user-font-size: map-get($font-size, $size);

            @if $user-font-size != null {
                @if $unit == px {
                    @return ($user-font-size * $base-font-size) + px;
                } @else {
                    @return $user-font-size + rem;
                }
            } @else if unit($size) == '' or unit($size) == rem {
                // Rem or no unit treat as rem
                @if $unit == px {
                    @return (($size / ($size * 0 + 1)) * $base-font-size) + px;
                } @else {
                    @return ($size / ($size * 0 + 1)) + rem;
                }
            } @else if unit($size) == 'px'{
                // Work out rem from px value
                @if $unit == px {
                    @return $size;
                } @else {
                    @return (($size / ($size * 0 + 1)) / $base-font-size) + rem; 
                }
            } @else {
                @warn "Font size error: use a value from the size map, a unitless rem value or a px value";
            }
        }
    }
}

@mixin font-size($size: "") {
    // Size accepts:
    // • value from $font-size map
    // • rem value
    // • px value
    // • unitless value (treated as rem)
    // • empty (a default of base font size will be returned)
    
    font-size: size($size, px);
    font-size: size($size, rem);
}

@mixin line-height($size: "") {
    // Size accepts:
    // • value from $font-size map
    // • rem value
    // • px value
    // • unitless value
    //   (treated as a line-height multiplier, i.e. $size is returned)
    // • empty (a default line-height of $base-font-size * $line-height-multiplier will be returned)
    
    $unitless: false;
    @if $size != '' and type-of($size) != string and unit($size) == '' {
        $unitless: true;
    }
    @if $unitless == false {
        line-height: size($size, px, $line-height-multiplier, $unitless);
        line-height: size($size, rem, $line-height-multiplier, $unitless);
    } @else {
        line-height: size($size, null, null, $unitless);
    }
}

html {
    font-size: $base-font-size / 16 * 100%;
}

p {
    @include font-size(28px);
    @include line-height();
}

SassMeister-output.css

html {
  font-size: 100%;
}

p {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 24px;
  line-height: 1.5rem;
}