[SaSS] Using Object like style to create class dynamiclly
$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的更多相关文章
- 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 ...
- Object.create
var emptyObject = Object.create(null); var emptyObject = Object.create(null); var emptyObject = {}; ...
- How to create QTP Shared Object Repository
How to create QTP Shared Object Repository To create a shared object repository by performing follow ...
- 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 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- Sass学习之路:Sass、Compass安装与命令行
导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...
- 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 ...
- 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less
写在前面乱七八糟的前言: emmm,还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?TAT语法特性是真的香,通篇下来能吸收个10%自我感觉已经很nice了,毕竟渣渣的我有渣渣的自 ...
- Sass(Syntactically Awesome Stylesheets)——概述(待续)
官网地址:http://sass.bootcss.com/ Sass(Syntactically Awesome Stylesheets) Sass 是成熟.稳定.强大的 CSS 扩展语言. 特征 兼 ...
随机推荐
- 设计Qt风格的C++API
在奇趣(Trolltech),为了改进Qt的开发体验,我们做了大量的研究.这篇文章里,我打算分享一些我们的发现,以及一些我们在设计Qt4时用到的原则,并且展示如何把这些原则应用到你的代码里. 优秀AP ...
- PAT-1014 Waiting in Line (30 分) 优先队列
Suppose a bank has N windows open for service. There is a yellow line in front of the windows which ...
- java01_简介_开发环境
JAVA的前世今生 美国SUN(Stanford University Network)公司,在中国大陆的正式中文名为"太阳计算机系统(中国)有限公司",在中国台湾的正式中文名为& ...
- ASP.NET WEB应用程序(.network4.5)MVC Razor视图引擎2 动态数据的呈现
https://www.cnblogs.com/cynchanpin/p/7065098.html 在MVC3開始.视图数据能够通过ViewBag属性訪问.在MVC2中则是使用ViewData.MVC ...
- jQuery入门简述
jQuery 是一套快速的,简洁的 javaScript 脚本库,jQuery 由美国人 John Resig 创建,至今已吸引了来自世界各地的众多 javaScript 高手加入其组织,使用户能更方 ...
- MySQL5.7.28免安装版配置
下载 安装配置 问题及解决方案 一.下载 找到你要的版本点击“looking for the latest GA version?”切换,我这个安装的是5.7.28,然后往下拉: 找到免安装的压缩包: ...
- golang包管理工具
软件开发中,不可避免的会使用到第三方库,因此包管理工具可以极大的方便开发者管理第三方依赖,避免掉入"依赖地狱". 作为google强大背书的golang语言,golang官方包管理 ...
- zabbix-设置邮箱预警
设置预警系统 机器是被监控上了,但是出了问题怎么通知呢?之前学过监控软件的都知道可以使用报警机制啊,如果监控平台zabbix server发现某个机器异常了,可以给运维管理员发邮件啊,通过邮件通知管理 ...
- 解决sqoop抽数报错:IO Error: Connection reset
遇到的问题:进行sqoop抽数时,虽然能成功执行,但是过程中有很多这样的信息 19/11/20 15:17:11 INFO mapreduce.Job: Task Id : attempt_15737 ...
- 爬虫的新模块pyppeteer的使用
安装 python3 -m pip install pyppeteer 最好是py3.5+ 手动安装 你懂的,天朝网络环境很复杂,如果要用pyppeteer自己绑定的chromium,半天都下载不下来 ...