[SASS]クラスdynamicllyを作成するために、スタイルのようなオブジェクトを使用しました

黒$：＃000 ; 
白$：#FFF; 
黄色$：＃ffe183。
$のダーク - 赤：＃e70404; 
$のダーク - 緑：＃0d8268; 
$雲 - 青：#dcedff。

$トースト - パレット：（
    情報：（
        色：$黒、
        背景：$雲 - 青
    ）、
    エラー：（
        色：$白、
        背景：$ダーク - 赤
    ）、
    成功：（
        色：$白、
        背景：$ダーク - 緑
    ）、
    警告：（ 
        色：黒$、
        背景：$黄色
    ）
）; 

トースト@mixin - パレット{ 
    @eachの$名、$パレット内の$ toast-のパレット{

        ＆ - ＃{$名} { 
            背景 -color：MAP- GET （$パレット、バックグラウンド）。

            ＆、
            .icon、
            ボタン：ありません（.button - 二次）{ 
                色：マップ - 取得（$パレット、色）; 
            } 
        } 
    } 
} 

.nd - トースト{ 
    @includeトースト - パレット（）。
}

 

もっと  https://sass-lang.com/documentation/functions/map

 

使い方：

.callout.callout・コンテキスト（ng- クラス = " 'ND-toast--' + vm.type "役割= " alertdialog "）