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
since long before it was added to CSS. LibSass (which is used by
under the hood) will currently always parse the
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).