min() in CSS vs. min() in LibSass
The other day a friend asked if I had ever seen
node-sass error with:
Internal Error: Incompatible units: '%' and 'rem'.
I didn’t think I ever had, but I remembered reading about the relatively new
min() function in CSS only the week before. It was added in the Values and Units Module Level 4.
The error, in this case, was caused by this tiny snippet:
padding-top: min(10%, 1rem);
Sass has had a
max()) function since long before it was added to CSS. LibSass (which is used by
node-sass under the hood) will currently always parse the
max()) function and that is what causes the error in this case.
LibSass tries to parse the value at compile time, when it is unknown exactly which of the two (in this case
1rem) is the smallest one, hence the error. CSS would parse the above snippet at run time and therefore knows exactly which of the two is the smallest.
Dart Sass has no problem outputting the correct CSS call to
min(). So if you want or have to use Sass in a project, your best bet is to use Dart Sass (
sass in the npm registry).