Can't compile sass because of mat-badge-theme mixin error

[tcober]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

My sass would compile.

What is the current behavior?

I get the error:
"Error: Base-level rules cannot contain the parent-selector-referencing character '&'.\A on line 2890 of phsapp/node_modules/@angular/material/_theming.scss, in mat-badge-theme'\A from line 2973 of phsapp/node_modules/@angular/material/_theming.scss, in angular-material-theme'\A from line 27 of sass/theme/material/olo-theme.scss"

What are the steps to reproduce?

Using this custom theming file

@import '../../../phsapp/node_modules/@angular/material/theming';
    $cdk-z-index-overlay-container: 99999;
    $cdk-z-index-overlay: 99999;
    $cdk-z-index-overlay-backdrop: 99999;
    // Plus imports for other components in your app.
    // Include the common styles for Angular Material. We include this here so that you only
    // have to load a single css file for Angular Material in your app.
    // Be sure that you only ever include this mixin once!
    $OLOtype: mat-typography-config( $font-family: inherit, $headline: mat-typography-level(32px, 48px, 700), $body-1: mat-typography-level(16px, 24px, 500));
    @include mat-core($OLOtype);
    $mat-oloblue: ( 50: #e3edf6, 100: #b8d2e9, 200: #89b4da, 300: #5995cb, 400: #367fbf, 500: #1268b4, 600: #1060ad, 700: #0d55a4, 800: #0a4b9c, 900: #053a8c, A100: #b9d0ff, A200: hsl(220, 100%, 76%), A400: #538bff, A700: #3a7aff, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #ffffff, ));
    $mat-olopurple: ( 50: #efe0ec, 100: #d8b3cf, 200: #be80b0, 300: #a34d90, 400: #902678, 500: #7c0060, 600: #740058, 700: #69004e, 800: #5f0044, 900: #4c0033, A100: #ff80cc, A200: #ff4db8, A400: #ff1aa3, A700: #ff0099, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #ffffff, A700: #ffffff, ));
    $mat-olowarning: ( 50: #fae2e9, 100: #f2b8c7, 200: #e988a2, 300: #e0587d, 400: #da3561, 500: #d31145, 600: #ce0f3e, 700: #c80c36, 800: #c20a2e, 900: #b7051f, A100: #ffe1e4, A200: #ffaeb6, A400: #ff7b88, A700: #ff6271, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000, ));
    // Define the palettes for your theme using the Material Design palettes available in palette.scss
    // (imported above). For each palette, you can optionally specify a default, lighter, and darker
    // hue.
    $OLOprimary: mat-palette($mat-oloblue);
    $OLOaccent: mat-palette($mat-olopurple);
    // The warn palette is optional (defaults to red).
    $OLOwarn: mat-palette($mat-olowarning);
    // Create the theme object (a Sass map containing all of the palettes).
    $OLOtheme: mat-light-theme($OLOprimary, $OLOaccent, $OLOwarn);
    // Include theme styles for core and each component used in your app.
    // Alternatively, you can import and @include the theme mixins for each component
    // that you are using.
    @include mat-core-theme($OLOtheme);
    @include angular-material-theme($OLOtheme);
    @include mat-badge-theme(mat-light-theme($OLOprimary, $OLOaccent, $OLOwarn));
    .mat-icon {
        font-size: 23px!important;
    }

Is there anything else we should know?

If I go into @angular/_theming.scss and remove the ampersands from the mat-badge-theme mixin everything works great.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}