SASS - compare vh and px with min function

Question

I am trying to get the minimum between 7.6% of the viewport height and 55px.

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

This gives me an error about incompatible units. Can this be done?

Answer 1

The Sass min() function only works when both values have the same unit (%, px, em, etc.). However, CSS itself has a min() function built in. Modern Dart Sass will automatically use the CSS function when possible.

For older versions of Sass, to use the CSS function you need to override min() with your own custom function like this:

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

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

Thanks to Jianqiu Xiao on GitHub for pointing out the "override" solution.