jeudi 21 avril 2016

Performing unit math with SASS and rem/em

I am transitioning our app from LESS to Sass and I can't seem to figure out how to convert this one mixin we have that is computing our font grid.

Here's an excerpt that works in LESS:

@font-size-base: 1em;
@baseline-height: 1.375rem;

@lineHeightMultiplier: unit(ceil(@font-size-base / @baseline-height));
line-height: unit(((@lineHeightMultiplier * @baseline-height) / @font-size-base), em);

In Sass:

$font-size-base: 1em;
$baseline-height: 1.375rem;

$lineHeightMultiplier: unit(ceil($font-size-base / $baseline-height));
line-height: unit((($lineHeightMultiplier * $baseline-height) / $font-size-base));

The Sass code throws the following error on line 5, where we set line-height:

Error: Undefined operation: ""em/rem" times 1.375rem".

I am having a hard time grasping how the Sass unit method and the LESS unit method relate. Do I need to convert my rem before doing the math?

Here's the documentation for the Sass method:

http://ift.tt/1MLMQ5u

And for the LESS:

http://ift.tt/1Qr54UB




Aucun commentaire:

Enregistrer un commentaire