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

Question

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

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

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

Answer 1

仅当两个值具有相同单位（min()，%，px等）时，Sass em函数才起作用。但是，CSS本身内置了min()函数。

要使用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指出此解决方案。必须创建一个自定义函数是Sass编译器的一个不幸之处，尽管它显然已经在Dart Sass中得到了解决。

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>