`$header-styles` doesn't apply line-height correct when `$global-font-size` != 100%

[RudolfBos]

What should happen?

First increase or decrease the $global-font-size variable so it isn't 100%. When you set the line-height in the mapping of the $header-styles variable, you expect it to have the computed style in pixels, matching with your value set in the variable.

What happens instead?

The line-height is too large.

Possible Solution

No idea how to solve this.

Test Case and/or Steps to Reproduce (for bugs)

How to reproduce:

1. Set the $global-font-size variable to 125%.
2. Set the following $header-styles variable:
   $header-styles: (
   small: (
   'h1': ('font-size': 36, 'line-height': 48),
   ),
   );

Your Environment

• Foundation version(s) used: Version 6.5.3
• Browser(s) name and version(s): All browsers
• Device, Operating System and version: All OS
• Link to your project: Not available

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.

[RudolfBos]

I've tried 48 and 48px. All of them return a line-height multiplied by the $global-font-size variable. I've also tried '48px'' but it doesn't accept a string value.

[DanielRuf]

multiplied by the $global-font-size variable

I currently do not understand what the bug here is.

[ClemensSchneider]

Maybe the root for the issue is the static usage of 16px in scss/util/unit#unitless-calc?

// If the base font size is a %, then multiply it by 16px
  @if unit($base) == '%' {
    $base: ($base / 100%) * 16px;
  }

  @if unit($base) == 'rem' {
    $base: strip-unit($base) * 16px;
  }

  @if unit($base) == 'em' {
    $base: strip-unit($base) * 16px;
  }

I've set the $global-font-size to 14px and the $rem-base to $global-font-size. Now, when setting the line-height in $header-styles, I am not able to get the values I declared.

So for the following declaration

$global-font-size: 14px;
$rem-base: $global-font-size;

@import "~foundation-sites/scss/foundation";

$header-styles: (
  'small': (
    'h2': ('fs': 30, 'lh': 36, 'mt': 0, 'mb': $header-margin-bottom),
  )
);

I would expect the h2 line-height to be 36px (or at least 1.2 if it is transformed to a relative value), but it is converted to 1.05 in this case which is wrong.