Question

我在Sass mixin中计算不同的line-height s，以确保不同的元素符合垂直节奏。我的$vertical-rhythm-base目前为8px。

某些浏览器（至少是Chrome）的值似乎为1.33333而使用23px而不是我想到的24px。所以我试着在我的mixin中纠正这个值：

$vertical-rhythm-base: 8px

=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

.someElement
  +calculateLinHeight(18px)
  font-size: 18px

这似乎无效，因为应该line-height: 1.33334的项目仍然可以获得line-height: 1.33333。

我不知道这里出了什么问题。将@if更改为使用=而不是==会导致line-height: 1.33334分配给所有内容，而不是正确计算它。

Answer 1

1,33333是重复的。尝试＆＃34; ==（4/3）＆＃34;

Answer 2

Sass不会执行舍入，直到之后比较已经完成并且是时候生成输出了。您的变量仍然包含重复的小数，即使它看起来不是。如果要检查相等性，则必须将重复值与重复值进行比较：

$foo: 4 / 3;

@debug $foo == 1.33333; // false
@debug $foo == 4 / 3;   // true

请注意，如果Sass在比较时而不是之后执行舍入，则当使用默认精度设置5时，if语句将仅评估为true（有许多Sass库需要比此更高的精度设置，I运行上面的代码，精度为10）。另请注意，Sass的默认精度之前已经更改过一次，并且将来可能会再次更改。

为什么这些浮点值在Sass中不相等？

2 个答案: