lundi 22 février 2016

Check for variable value in Sass not working

I'm calculating different line-heights within a Sass mixin to ensure that different elements adhere to a vertical rhythm. My $vertical-rhythm-base is currently 8px.

Some browsers (at least Chrome) seem to floor a value of 1.33333 and use 23px instead of the desired 24px I had in mind. So I tried to correct that value within my mixin:

=calculateLineHeight($itemFontSize)
  $lineHeightBase: $vertical-rhythm-base * 3
  $itemLineHeight: (ceil($itemFontSize/$lineHeightBase)*$lineHeightBase)/$itemFontSize
  // fix miscalculation for this value since browsers resort to 23px
  // instead of 24px in the current setup.
  @if $itemLineHeight == 1.33333
    $itemLineHeight: 1.3334

  line-height: $itemLineHeight

This doesn't seem to work since the items that should get a line-height: 1.33334 still get line-height: 1.33333.

I don't get what is going wrong here. Changing the @if to use = instead of == results in assigning line-height: 1.33334 to everything instead of calculating it correctly.

Am I overlooking something?

Aucun commentaire:

Enregistrer un commentaire