0

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.

0

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.