[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 扩展语言. 特征 兼 ...
随机推荐
- Office 2016、2019 与 Office 365 的区别
点开观看更清晰:
- 【C++札记】指针函数与函数指针
指针函数 指针函数是一个函数,只不过指针函数返回的类型是某一类型的指针. 格式: 类型名* 函数名(函数参数列表) 如下代码存在问题 void test(char *p) { p = (char*)m ...
- Anaconda安装报错
通用解决方案:先卸载,然后重新安装(注意安装路径全英文且不要有空格),勾选添加环境变量选项
- SAS学习笔记2 基础函数应用
输入输出语句(put和input函数) put()函数:把数值型或字符型变量转为字符型变量(输出变量) input()函数:将字符型变量转化为数值型变量(输入变量) 选择与删除语句(keep.drop ...
- 使用DANT做FTP的转发代理
FTP不能直接使用nginx进行转发,想了一些办法,最后决定使用iptalbes做DNAT,相关于把这个机器做一台防火墙,做一个NAT 1.启用ip_forward vim /etc/sysctl.c ...
- IIs发布的项目无法打开问题
1/查看一下ISAPI筛选器,是否存在2.0,4.0,若缺少东西,就从新安装一下iis,存在某些程序没有被勾选,一般是asp.net3.5,asp.net4.0
- IE浏览器 Table 兼容问题
border篇: 直接在<tr>标签上添加 border-bottom:1px solid red; 在IE8以上浏览器有效,IE7以下版本无效 解决方案:需给<table&g ...
- Postman如何进行参数化
前言 Postman作为一款接口测试工具,受到了非常多的开发工程师的拥护. 那么做为测试,了解Postman这款工具就成了必要的了. 这篇文章就是为了解决Postman怎么进行参数化的. 全局变量 全 ...
- C++ 虚函数相关
多态 C++的封装.继承和多态三大特性,封装没什么好说的,就是把事务属性和操作抽象成为类,在用类去实例化对象,从而对象可以使用操作/管理使用它的属性. 至于继承,和多态密不可分.基类可以进行派生,而派 ...
- JAVA中对象的克隆及深拷贝和浅拷贝
使用场景: 在日常的编程过程 中,经常会遇到,有一个对象OA,在某一时间点OA中已经包含了一些有效值 ,此时可能会需一个和OA完全相对的新对象OB,并且要在后面的操作中对OB的任何改动都不会影响到OA ...