[SaSS] Using Object like style to create class dynamiclly

$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")

 

转载于:https://www.cnblogs.com/Answer1215/p/11207420.html