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

Question

我有一个 SASS mixin。目前，$line高度需要完整 数字是 1、2 等，但不是 1.4、2.2 等。

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

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

因此，如果$line高度为 1、2 等，则不添加填充。

如果$line高度为 1.5，则需要添加 0.5 填充。

如果$line高度为 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);
}