$black: #000; $white: #fff; $yellow: #ffe183; $dark-red: #e70404; $dark-green: #0d8268; $cloud-blue: #dcedff; $toast-palette: ( info: ( color: $black, background: $cloud-blue ), error: ( color: $white, background: $dark-red ), success: ( color: $white, background: $dark-green ), warning: ( color: $black, background: $yellow ) ); @mixin toast-palette { @each $name, $palette in $toast-palette { &--#{$name} { background-color: map-get($palette, background); &, .icon, button:not(.button--secondary) { color: map-get($palette, color); } } } } .nd-toast { @include toast-palette(); }
More from https://sass-lang.com/documentation/functions/map
How to use:
.callout.callout-contextual(ng-class="'nd-toast--' + vm.type" role="alertdialog")