I'm trying to figure out if there is a way to use 1 @include statement for the same mixin that can change values based on class. Here is a simple example of applying mixin values for a snack bar class using multiple @includes (which works):
Our app launches a snackbar to tell the user some result of an action:
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 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 without using combinations of other css declarations, like @scope and @if?
I don't know if using abundant @include()
declarations across your application will make it consume excess memory for something as simple as changing background and text colors, but from a simplistic point of view, if there is a way to only use 1 @include here then it looks like less computing power on the surface.