CSS的min()函数在SASS中失效，如何改写兼容？

Hey there! I’ve dealt with this exact quirk before—Sass loves to override native CSS functions with its own built-in ones, which is why your min() declaration isn’t working as expected. Let’s fix that.

Why This Happens #

Sass has its own min() function designed to calculate the smallest numerical value from a list. When it sees your code, it tries to parse it as a Sass function instead of passing it straight to the browser as native CSS. That’s where the breakdown happens.

Solution 1: Use Sass Interpolation (#{}) #

This is my go-to method because it keeps your code readable and lets you use Sass variables in the calc() if you need to later. Wrap each calc() call in interpolation to tell Sass to treat it as raw CSS:

width: min(#{calc(100vw - 51rem)}, #{calc(100vh - 2rem)});

If you ever want to swap in a Sass variable (like $side-padding: 51rem;), this method makes it easy:

$side-padding: 51rem;
width: min(#{calc(100vw - #{$side-padding})}, #{calc(100vh - 2rem)});

Solution 2: Use unquote() #

If you want to output the entire min() declaration as-is without any Sass parsing, you can wrap the whole string in unquote():

width: unquote("min(calc(100vw - 51rem), calc(100vh - 2rem))");

This works great for one-off cases where you don’t need to inject variables into the calc() calls.

Either of these approaches will make your native CSS min() work correctly in Sass. I personally prefer interpolation for its flexibility!

内容的提问来源于stack exchange，提问作者Yosef