scss mixin crashes the compiler

[nseni]

Command

serve

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

A scss mixin causes an error and ng serve is unable to recover (i.e. it does not recompile the further changes to the files)

Minimal Reproduction

@use '@angular/material' as mat;
@include mat.checkbox-density(-5px);

Exception or Error

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: 40px and -20px*px have incompatible units.
    ╷
111 │     $value: map.get($property-scale-map, default) + $density-scale * $interval;
    │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  @material\density\_density.scss 111:13                                   prop-value()
  @material\checkbox\_checkbox-theme.scss 310:11                           get-ripple-size()
  @material\checkbox\_checkbox-theme.scss 324:10                           density()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 92:7        @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 90:3        density()
  src\styles\material.scss 2:1                                             @import
  src\styles.scss 2:9                                                      root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: 40px and -20px*px have incompatible units.
    ╷
111 │     $value: map.get($property-scale-map, default) + $density-scale * $interval;
    │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  @material\density\_density.scss 111:13                                   prop-value()
  @material\checkbox\_checkbox-theme.scss 310:11                           get-ripple-size()
  @material\checkbox\_checkbox-theme.scss 324:10                           density()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 92:7        @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 90:3        density()
  src\styles\material.scss 55:1                                            @import
  src\styles.scss 2:9                                                      root stylesheet

Your Environment

Angular CLI: 15.0.0
Node: 18.12.0
Package Manager: npm 9.1.1
OS: win32 x64

Angular: 15.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0
@angular-devkit/schematics      15.0.0
@schematics/angular             15.0.0
rxjs                            7.5.7
typescript                      4.8.4

Anything else relevant?

No response