$black: #;
$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")

[SaSS] Using Object like style to create class dynamiclly的更多相关文章

  1. android Error occurred during initialization of VM Could not reserve enough space for object heap Could not create the Java virtual machine.

    在当前工程目录中 gradle.properties 添加org.gradle.jvmargs=-XX\:MaxHeapSize\=256m -Xmx256m http://stackoverflow ...

  2. Object.create

    var emptyObject = Object.create(null); var emptyObject = Object.create(null); var emptyObject = {}; ...

  3. How to create QTP Shared Object Repository

    How to create QTP Shared Object Repository To create a shared object repository by performing follow ...

  4. how to create a style element in js (many ways)

    how to create a style element in js (many ways) create style in js Constructed StyleSheets CSSStyleS ...

  5. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  6. Sass学习之路:Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  7. Using Sass with the Angular CLI

    https://www.tuicool.com/articles/mauiMzY One of the first things you'll usually do in a project is t ...

  8. 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less

    写在前面乱七八糟的前言: emmm,还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?TAT语法特性是真的香,通篇下来能吸收个10%自我感觉已经很nice了,毕竟渣渣的我有渣渣的自 ...

  9. Sass(Syntactically Awesome Stylesheets)——概述(待续)

    官网地址:http://sass.bootcss.com/ Sass(Syntactically Awesome Stylesheets) Sass 是成熟.稳定.强大的 CSS 扩展语言. 特征 兼 ...

随机推荐

  1. js时间戳与日期格式之间相互转换

    ###js时间戳与日期格式之间相互转换 将时间戳转换成日期格式 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法, ...

  2. 1269: 划分数(Java)

    WUSTOJ 1269: 划分数 参考博客 果7的博客 题目   将 1 个数 n 分成 m 份,求划分的种数.更多内容点击标题. 分析   唯一需要注意的地方是不考虑顺序.其他的直接看代码即可. 代 ...

  3. c++设计原则:继承与组合

    “优先使用对象组合,而不是继承”是面向对象设计的原则之一. 组合也叫“对象持有”,就是在类中定义另一类型的成员,继承会破坏类的独立性,增加系统的复杂性,一般系统的继承层次不超过3层.组合拥有良好的扩展 ...

  4. pandas 索引笔记

    import pandas as pd import numpy as np s = pd.Series(np.random.rand(5), index=list('abcde')) # 创建序列, ...

  5. 使用HSE配置系统时钟并用MCO输出监测系统时钟

    使用模板,在User下新建文件夹RCC 新建bsp_rccclkconfig.h和bsp_rccclkconfig.c 工程和魔术棒添加 对照着上节的RCC源文件编写: void HSE_SetSys ...

  6. s5p6818 Overview

    S5P6818: 64bit Octa-Core, High Performance, Advanced 3D Graphics, Full-HD Multimedia Video, A53 Core ...

  7. MVC5项目转.Net Core 2.2学习与填坑记录(1)

    流程都是自己摸索,错误地方随便指正... 老项目过于臃肿,并且所有请求都是提交到一个api中,这样当api挂掉的时候,基本所有的项目都瘫痪掉了. 在4月底的时候,下决心将项目用微服务进行重写,刚开始的 ...

  8. Post请求数据传到后台+号变成了空格

    问题: 今天遇到一个问题:页面带有"+"号的数据,传到服务端接口,结果+号变成了空格.例如:传“1+1”变成了"1 1". 解决办法: 方案一: 将“+”号替换 ...

  9. flex应用实例

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  10. CSS过渡效果transition和动画

    一.过渡效果 可以在不适用Flash和js 的情况下实现过渡效果 属性 描述 transition 简写属性,用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的c ...