Scoping Angular Material Mixins: Is there a better way?

All,

I'm trying to figure out if there is a more efficient way of scoping Angular Material mixins. Here is a simple example of applying mixin values for a snack bar class:

Our app launches a snackbar to tell the user some action was successful:

this._snackBar.open(snackbar.message, snackbar.action, {
duration: 5000,
panelClass: [snackbar.snackType], // 'success-snack', 'error-snack', 'info-snack', warning-snack'
verticalPosition: 'top',
horizontalPosition: 'center'
});


Then css correctly applies the mixin based on the scoped class in panelClass like so:

.error-snack {
@include mat.snack-bar-overrides((
container-color: red,
supporting-text-color: white,
));
}

.info-snack {
@include mat.snack-bar-overrides((
container-color: deepskyblue,
supporting-text-color: white,
));
}
...


This method correctly changes the snackbar color, text color, etc based on class. But, is there a better way to do this, where we don't have to @include() multiple times?

Something like the following:

@include mat.snack-bar-overrides((
.error-snack {
container-color: red,
supporting-text-color: whitesmoke,
}
.warning-snack {
container-color: orange,
supporting-text-color: whitesmoke,
}
// ...etc
))


Is this possible?

I don't know if using abundant @include() across your application will make it consume excess memory. I'm just wondering if there is a better way to scope mixins. Thank you.

Continue reading...