Can't compile sass because of mat-badge-theme mixin error #9990
Description
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.