$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. Office 2016、2019 与 Office 365 的区别

    点开观看更清晰:

  2. 【C++札记】指针函数与函数指针

    指针函数 指针函数是一个函数,只不过指针函数返回的类型是某一类型的指针. 格式: 类型名* 函数名(函数参数列表) 如下代码存在问题 void test(char *p) { p = (char*)m ...

  3. Anaconda安装报错

    通用解决方案:先卸载,然后重新安装(注意安装路径全英文且不要有空格),勾选添加环境变量选项

  4. SAS学习笔记2 基础函数应用

    输入输出语句(put和input函数) put()函数:把数值型或字符型变量转为字符型变量(输出变量) input()函数:将字符型变量转化为数值型变量(输入变量) 选择与删除语句(keep.drop ...

  5. 使用DANT做FTP的转发代理

    FTP不能直接使用nginx进行转发,想了一些办法,最后决定使用iptalbes做DNAT,相关于把这个机器做一台防火墙,做一个NAT 1.启用ip_forward vim /etc/sysctl.c ...

  6. IIs发布的项目无法打开问题

    1/查看一下ISAPI筛选器,是否存在2.0,4.0,若缺少东西,就从新安装一下iis,存在某些程序没有被勾选,一般是asp.net3.5,asp.net4.0

  7. IE浏览器 Table 兼容问题

    border篇: 直接在<tr>标签上添加 border-bottom:1px solid red;  在IE8以上浏览器有效,IE7以下版本无效   解决方案:需给<table&g ...

  8. Postman如何进行参数化

    前言 Postman作为一款接口测试工具,受到了非常多的开发工程师的拥护. 那么做为测试,了解Postman这款工具就成了必要的了. 这篇文章就是为了解决Postman怎么进行参数化的. 全局变量 全 ...

  9. C++ 虚函数相关

    多态 C++的封装.继承和多态三大特性,封装没什么好说的,就是把事务属性和操作抽象成为类,在用类去实例化对象,从而对象可以使用操作/管理使用它的属性. 至于继承,和多态密不可分.基类可以进行派生,而派 ...

  10. JAVA中对象的克隆及深拷贝和浅拷贝

    使用场景: 在日常的编程过程 中,经常会遇到,有一个对象OA,在某一时间点OA中已经包含了一些有效值 ,此时可能会需一个和OA完全相对的新对象OB,并且要在后面的操作中对OB的任何改动都不会影响到OA ...