SASS - 用 min 函数比较 vh 和 px

Question

我试图在视口高度的 7.6% 和 55px 之间获得最小值。

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

这给了我关于不兼容单位的错误。这能做到吗？

Answer 1

Sassmin()函数仅在两个值具有相同单位（%、px、em等）时才起作用。然而，CSS 本身min()内置了一个函数。Modern 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 上的肖剑秋指出“覆盖”解决方案。

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>