Margin Calculated weirdly

[ramsaylanier]

As mentioned in #23, libsass interpolates some things weirdly. The proposed correction was to update _typeplate_function.scss as follow:

// $Context Calculator
// -------------------------------------//
// target / context = result
//
// @example             p { font-size: context-calc(24, 16, px); }

@function typl8-context-calc($scale, $base, $value) {
  @return #{$scale/$base}#{$value}; // chaining two interpolations
}


// $Measure-Margin
// -------------------------------------//
// divide 1 unit of measure by given font-size & return relative value
@function typl8-measure-margin($scale, $measure, $value) {
  $pixelValue: $measure/$scale;
  $remValue: $pixelValue * $typl8-font-base;

  @if $value == rem {
    @return #{$pixelValue}#{$value};
  } @else if $value == em {
    @return #{$remValue/$scale}#{$value};
  } @else {
    @return #{$remValue}#{$value};
  }
}

However, this was causing my Heading margins to be calculated backwards, meaning the H1 bottom margin was smaller than, say, and H3 as seen here.

I found that by switching the $pixelValue calculation from $measure/$scale to $scale/$measure fixes the issue, I think?

Is this....correct?

[justindietert]

The CSS version of Typeplate still uses the measure/scale method for calculating heading margins. I have found that this method produces a proper vertical rhythm for headings (in my opinion).

I just started using the SASS version, and the fix incorporated here has broken the vertical rhythm of my headings. There is now far too much space below a heading the larger that heading gets.

Perhaps the calculation should be switched back to $measure/$scale, as originally designed?