$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. 给出一个javascript的Helloworld例子

    1.基础知识:Helloworld:例 1.1<html><head>    <!--  如果你用notepad建立一个txt之后你再改为html,一定在存时,要存成ut ...

  2. MySQL忘记密码解决

    1.设置管理员root密码为123 开启MySQL服务后 PS C:\WINDOWS\system32> mysqladmin -uroot -p password "123" ...

  3. 【转】利用匿名namespace解决C++中重复定义的问题

    目录 利用匿名namespace解决C++中重复定义的问题 原文:https://blog.csdn.net/pi9nc/article/details/11267031 利用匿名namespace解 ...

  4. 如何用Dome4j(2.2.1)创建Xml

    XML解析器常见的有两种: 1.SAX解析器,用于xml的简单API 2.DOM解析器,文档对象模型 DOM就是利用对象来把文本模型化,但是模型实现有以下几个基本的点: 1. 用来表示.操作文档的接口 ...

  5. python中集合set,字典dict和列表list的区别以及用法

    python中set代表集合,list代表列表,dict代表字典 set和dict的区别在于,dict是存储key-value,每一个key都是唯一的,set相对于dict存储的是key,且key是唯 ...

  6. raise ImproperlyConfigured('mysqlclient 1.3.13 or newer is required; you have %s.' % Database.__version__)

    转自:http://www.cnblogs.com/xiaobinglife/articles/10716605.html 一.Django数据同步过程中遇到的问题: 1.raise Improper ...

  7. 部署java应用的几种方式

    J2EE应用 该应用根目录下有好多文件夹和以jsp结尾的文件 部署时,需要在tomcat的conf目录下的server.xml文件中添加上<Context path="/" ...

  8. DP动态规划学习笔记——高级篇上

    说了要肝的怎么能咕咕咕呢? 不了解DP或者想从基础开始学习DP的请移步上一篇博客:DP动态规划学习笔记 这一篇博客我们将分为上中下三篇(这样就不用咕咕咕了...),上篇是较难一些树形DP,中篇则是数位 ...

  9. 日志(log4j)

    log4j测试代码如下: package com.learn.test; import org.apache.log4j.Logger; public class Test { public stat ...

  10. Python Selenium、PIL、pytesser 识别验证码

    思路: 使用Selenium库把带有验证码的页面截取下来 利用验证码的xpath截取该页面的验证码 对验证码图片进行降噪.二值化.灰度化处理后再使用pytesser识别 使用固定的账户密码对比验证码正 ...