SASS可以计算一个值和下一个整数之间的差异吗？

Question

我有一个SASS mixin。目前，$ line-height需要是完整的 数字如此1,2等，但不是1.4,2.2等。

@mixin text-style($line-height) {
  line-height: $line-height rem;
}

我需要扩展它，这样你就不必使用整数。但为了做到这一点，我需要添加填充以保持垂直节奏。填充值是$ line-height和下一个整数之间的差值。

因此，如果$ line-height为1,2等，则不会添加填充。

如果$ line-height为1.5则需要添加0.5填充。

如果$ line-height为1.1则需要添加0.9填充。

SASS可以这样做吗？

Answer 1

您可以添加另一个mixin，它将使用相同的输入$line-height作为参数，并使用Marvin在其评论中写的逻辑：

@mixin add-padding($line-height) {
  $padding-to-add: ceil($line-height) - $line-height;
  padding: $padding-to-add;
}

现在您可以在样式中使用它，如下所示：

.selector {
  @include add-padding(2.4rem);
}