SASS-将vh和px与min功能进行比较

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

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

---

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

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

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

html，正文{
身高：100%；
保证金：0；
填充：0；
}
div{
背景：暗绿色；
高度：450px；
最小高度：100vh；
}

Sass

min（）

函数仅在两个值具有相同单位（

%

、

px

、

em

等）时才起作用。然而，CSS本身有一个内置的功能

要使用CSS函数，您需要使用自己的自定义函数覆盖

min（）

，如下所示：

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

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

---

感谢您指出此解决方案。必须创建自定义函数是一个不幸的Sass编译器怪癖，尽管它显然已经在Dart Sass中修复。

要覆盖Sass max（），请参阅实现，您可以通过在其前面放置反斜杠\来转义min和max。e、 例如，\min（…）或\max（…）