SASS - 将 vh 和 px 与 min 函数进行比较答案

【问题标题】：SASS - compare vh and px with min functionSASS - 将 vh 和 px 与 min 函数进行比较
【发布时间】：2018-04-22 01:35:02
【问题描述】：

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

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

这给了我一个关于不兼容单位的错误。这个可以吗？

【问题讨论】：

标签： sass

【解决方案1】：

Sass min() 函数仅在两个值具有相同单位（%、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);
}

感谢Jianqiu Xiao on GitHub 指出“覆盖”解决方案。

【讨论】：

【解决方案2】：

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

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

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

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

<div>
</div>

【讨论】：