SASS - 使用min函数比较vh和px

Question

我正在尝试获取视口高度的7.6%和55像素之间的最小值。

min-height: min(7.6vh, 55px);

这给了我一个有关不兼容的单位的错误。这个问题能解决吗？

- Kevin Shi

Answer 1

Sass的min()函数只有在两个值具有相同的单位（%，px，em等）时才有效。然而，CSS本身就内置了min()函数。现代Dart Sass会在可能的情况下自动使用CSS函数。

对于旧版本的Sass，要使用CSS函数，您需要覆盖min()并编写自己的自定义函数，如下所示：

// Override Sass min()
@function min($numbers...) {
  @return m#{i}n(#{$numbers});
}

div {
  // This now works
  width: min(7.6vh, 55px);
}

感谢GitHub上的Jianqiu Xiao指出了“override”解决方案。

- mfluehr

---

要覆盖Sass max()，请参见此处的实现（https://stackoverflow.com/questions/55535307/sass-create-function-to-do-max-and-min-on-margin） - RivasCVA

你可以在 min 和 max 前面加上反斜杠 \ 来避免它们被解释为公式中的最小值和最大值。例如，\min(...) 或 \max(...)。 - Adam Easterling

Answer 2

SASS编译器无法知道目标设备的视口高度，因此不可能将vh与给定像素值进行比较。

您可以设置高度为两个数字之一，并将另一个数字设置为最小高度。 但是，语义略有不同，因为现在还有一个最大高度。 在下面的示例中，div将使用（最多）视口高度的100％，但至少为450px：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  background: darkgreen;
  height: 450px;
  min-height: 100vh;
}

<div>
</div>

- Marvin