Why negative sign before a variable inside round function is a syntax error

[Sesna]

I'm migrating node-sass to dart-sass, this code works in node-sass, but got a syntax error in dart-sass.

.abc {
  $sqrt: 1.41;
  $dim: 30px;
  top: round(-$dim / $sqrt);
}

https://sass-lang.com/playground/#eJwzNNRLTEpWqOZSUFApLiwqsVIw1DMxtAZxUzJzrRSMDQoqQLyS/AIrhaL80rwUDV2QjII+RL2mNVctAGRnEoU=

After looking through the official docs, I found that in the early version, the round is always parsed as a sass function
see docs: https://sass-lang.com/documentation/values/calculations/#round

But I look through the docs of variables and operators, I still don't know why -$dim / $sqrt inside round can't be compiled to round(-30px / 1.41)

[nex3]

There are three overlapping things going on here:

1. Node Sass doesn't have support for modern math functions like round(), clamp(), sin(), and so on. Dart Sass does, and so in some circumstances, it will evaluate these expressions using CSS's math function semantics rather than the normal SassScript expression semantics.

2. For reasons that aren't entirely clear to me (possibly because - can begin an identifier in CSS?), CSS math functions don't support a unary minus operator like you're using in -$dim. See the specification for details.

3. round() in particular is a global Sass function in addition to being a CSS math function, and for backwards-compatibility it's supposed to be evaluated as SassScript if it uses any features that aren't available in plain CSS. The fact that it's not doing so here is a bug that I will fix.

Since global Sass functions are deprecated anyway, the best solution here is probably to add @use 'sass:math'; to the top of your stylesheet and write math.round() instead, which will never be interpreted as a CSS function.

[nex3]

The fix has been released in Sass 1.85.1. You'll notice that your playground link is now working as intended.

[Sesna]

Thank you. I agree that we should use sass math to clarify, and we've done that.