fontsize-mixin

_mixin.scss

// GLOBAL VARIABLE

$base-font-size-mobile: 16;
$base-font-size-desktop: 18; //min-width: 30em
$base-line-height: 1.5;
$desktop-width: pxToEm(480);


// PX to EM
// call: margin-bottom: pxToEm(10); // 10/18= .555555556em
// call: margin-bottom: pxToEm(10, m); 10/16= .625em

@function pxToEm($size, $device) {
    @if $size == m {
        @return $size / $base-font-size-mobile + em;
    }
    @else {
        @return $size / $base-font-size-desktop + em;
    }
}


// FONT SIZE
// call: @include font-size(32, 26);

@mixin font-size($mobile, $desktop) {
    font-size: pxToEm($mobile);
    @if $desktop != null and $desktop != "" {
        @media all and (min-width: $desktop-width) {
            font-size: pxToEm($desktop);
        }
    }
}