1. $black: #;
  2. $white: #fff;
  3. $yellow: #ffe183;
  4. $dark-red: #e70404;
  5. $dark-green: #0d8268;
  6. $cloud-blue: #dcedff;
  7.  
  8. $toast-palette: (
  9. info: (
  10. color: $black,
  11. background: $cloud-blue
  12. ),
  13. error: (
  14. color: $white,
  15. background: $dark-red
  16. ),
  17. success: (
  18. color: $white,
  19. background: $dark-green
  20. ),
  21. warning: (
  22. color: $black,
  23. background: $yellow
  24. )
  25. );
  26.  
  27. @mixin toast-palette {
  28. @each $name, $palette in $toast-palette {
  29.  
  30. &--#{$name} {
  31. background-color: map-get($palette, background);
  32.  
  33. &,
  34. .icon,
  35. button:not(.button--secondary) {
  36. color: map-get($palette, color);
  37. }
  38. }
  39. }
  40. }
  41.  
  42. .nd-toast {
  43. @include toast-palette();
  44. }

More from https://sass-lang.com/documentation/functions/map

How to use:

  1. .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. 数据校验-hibernate-validator

    数据校验 在web开发时,对于请求参数,一般上都需要进行参数合法性校验的,原先的写法时一个个字段一个个去判断,这种方式太不通用了,所以java的JSR 303: Bean Validation规范就是 ...

  2. MongoDB查询操作

    按条件查询 比较操作:$lt,$lte,$gt,$gte,$ne db.user.find({}}); $or :包含多个条件,他们之间为or的关系 ,$nor相当于or取反 db.user.find ...

  3. 轻松搭建CAS 5.x系列(8)-在CAS Server增加双因素认证(DUO版)

    概述说明 为了让系统更加安全,很多登录会加入双因素认证.何为双因素,如果把登陆作为开一扇门的话,那就是在原来的锁上再加一把锁,第二锁用新的钥匙,这样安全系数就更加高了. CAS是通过账号名和密码来认证 ...

  4. 通过SQL Server的扩展事件来跟踪SQL语句在运行时,时间都消耗到哪儿了?

    原文:通过SQL Server的扩展事件来跟踪SQL语句在运行时,时间都消耗到哪儿了? 问题就是,一个很简单的语句,在不同的服务器上执行,所需要的时间相差很大,特别提到在性能差的服务器上反而快,在性能 ...

  5. Docker 安装mysql5.6

    1.首先进入命令行现在mysql5.6镜像 E:\>docker pull mysql:5.6 2.把mysql的配置文件放入到本地,供后期做修改用 文件分别为:mysql.cnf 和 mysq ...

  6. legacy

    int bw = blockDim.x; int bh = blockDim.y; int tx = threadIdx.x%bw; int ty = threadIdx.y%bh; __shared ...

  7. springboot启动流程(八)ioc容器refresh过程(下篇)

    所有文章 https://www.cnblogs.com/lay2017/p/11478237.html 正文 上一篇文章,我们知道了解析过程将从解析main方法所在的主类开始.在文章的最后我们稍微看 ...

  8. 关于Vue父组件把异步获取的数据传给子组件的问题

    由于父组件中的数据是异步获取的,而子组件在一开始便会渲染,所以会造成子组件渲染完成后,数据还未获取到的情况 这里有一个简单的解决方案:在子组件渲染前,判断父组件数据是否获取完成,数据获取完成后再渲染子 ...

  9. 在textarea和input光标处插入内容,支持ie

    项目需求,用户要能够输入和点击外面的公式去插入到textaera中,试了好几种方法,有的是在谷歌下好使,在ie下不好使,最后找到了下面这个方法,目前在ie8以上都可以生效.直接上代码 function ...

  10. 简单注册表单--HTML练手项目3【Table】

    [本文为原创,转载请注明出处] 技术[HTML]   布局[Table] 步骤1  划分table布局 步骤2 填充内容 文本框+密码框+单选框+复选框+多行文本域+按钮 <input> ...