$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. ARTS第七周打卡

    Algorithm : 做一个 leetcode 的算法题 ////////////////////////////////////////////////////////////////////// ...

  2. Django导出数据为Excel,调用浏览器下载

    1. 环境 Django (2.1.10) + Python3.6 + xlwt (1.3.0) 操作系统使用的为:Windows 7 2. 接口代码 def now_export(request): ...

  3. PAT(B) 1018 锤子剪刀布(C:20分,Java:18分)

    题目链接:1018 锤子剪刀布 分析 用一个二维数组保存两人所有回合的手势 甲乙的胜,平,负的次数刚好相反,用3个变量表示就可以 手势单独保存在signs[3]中,注意顺序.题目原文:如果解不唯一,则 ...

  4. GPIO输入—按键检测(开关控制小灯)

    本次的代码全是在上次代码之上添加的. 1.user下新建文件夹key,新建bsp_key.h bsp_key.c文件. 2.keil项目添加bsp_key.c,魔术棒C/C++中include pat ...

  5. Go学习路径--相关基础

    现在开始接触Go一段时间了,基本路径就是看基础学习材料,开始写项目,有问题找解决问题的方法.这里记录一下学习过程. go相关文章 Golang适合高并发场景的原因分析 go build 不同系统下的可 ...

  6. BZOJ3879 SvT(后缀树+虚树)

    对反串建SAM得到后缀树,两后缀的lcp就是其在后缀树上lca的len值,于是每次询问对后缀树建出虚树并统计答案即可. #include<iostream> #include<cst ...

  7. Android Studio 代码页跳界面 /java和XML快速切换技巧

    https://www.cnblogs.com/simadi/p/6698666.html?utm_source=itdadao&utm_medium=referral 今天又发现了一个And ...

  8. .NET Core中使用读取配置文件

    引入Nuget的两个类库 Microsoft.Extensions.Configuration Microsoft.Extensions.Configuration.Json 使用 var build ...

  9. vue-cli中eslint配置

    在项目目录下找到.eslintrc.js文件,使用编辑器打开进行编辑.在rules下添加space-before-function-paren.space-before-blocks.及semi的配置 ...

  10. DataGridView绑定数据、删除数据

    定义学生类: using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...