[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 扩展语言. 特征 兼 ...
随机推荐
- 数据校验-hibernate-validator
数据校验 在web开发时,对于请求参数,一般上都需要进行参数合法性校验的,原先的写法时一个个字段一个个去判断,这种方式太不通用了,所以java的JSR 303: Bean Validation规范就是 ...
- MongoDB查询操作
按条件查询 比较操作:$lt,$lte,$gt,$gte,$ne db.user.find({}}); $or :包含多个条件,他们之间为or的关系 ,$nor相当于or取反 db.user.find ...
- 轻松搭建CAS 5.x系列(8)-在CAS Server增加双因素认证(DUO版)
概述说明 为了让系统更加安全,很多登录会加入双因素认证.何为双因素,如果把登陆作为开一扇门的话,那就是在原来的锁上再加一把锁,第二锁用新的钥匙,这样安全系数就更加高了. CAS是通过账号名和密码来认证 ...
- 通过SQL Server的扩展事件来跟踪SQL语句在运行时,时间都消耗到哪儿了?
原文:通过SQL Server的扩展事件来跟踪SQL语句在运行时,时间都消耗到哪儿了? 问题就是,一个很简单的语句,在不同的服务器上执行,所需要的时间相差很大,特别提到在性能差的服务器上反而快,在性能 ...
- Docker 安装mysql5.6
1.首先进入命令行现在mysql5.6镜像 E:\>docker pull mysql:5.6 2.把mysql的配置文件放入到本地,供后期做修改用 文件分别为:mysql.cnf 和 mysq ...
- legacy
int bw = blockDim.x; int bh = blockDim.y; int tx = threadIdx.x%bw; int ty = threadIdx.y%bh; __shared ...
- springboot启动流程(八)ioc容器refresh过程(下篇)
所有文章 https://www.cnblogs.com/lay2017/p/11478237.html 正文 上一篇文章,我们知道了解析过程将从解析main方法所在的主类开始.在文章的最后我们稍微看 ...
- 关于Vue父组件把异步获取的数据传给子组件的问题
由于父组件中的数据是异步获取的,而子组件在一开始便会渲染,所以会造成子组件渲染完成后,数据还未获取到的情况 这里有一个简单的解决方案:在子组件渲染前,判断父组件数据是否获取完成,数据获取完成后再渲染子 ...
- 在textarea和input光标处插入内容,支持ie
项目需求,用户要能够输入和点击外面的公式去插入到textaera中,试了好几种方法,有的是在谷歌下好使,在ie下不好使,最后找到了下面这个方法,目前在ie8以上都可以生效.直接上代码 function ...
- 简单注册表单--HTML练手项目3【Table】
[本文为原创,转载请注明出处] 技术[HTML] 布局[Table] 步骤1 划分table布局 步骤2 填充内容 文本框+密码框+单选框+复选框+多行文本域+按钮 <input> ...