[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 扩展语言. 特征 兼 ...
随机推荐
- 十大经典算法 Python实现
十大经典排序算法(python实现)(原创) 使用场景: 1,空间复杂度 越低越好.n值较大: 堆排序 O(nlog2n) O(1) 2,无空间复杂度要求.n值较大: 桶排序 O(n+k) O(n+k ...
- 1254: 盒子游戏(Java)
WUSTOJ 1254: 盒子游戏 参考博客 叶剑飞Victor的博客 盒子游戏--爱程序网 原理是从上面博客看的,我另外补充了几幅图,方便理解 Description 有两个相同的盒子,其中一个装了 ...
- (错误)Lucene工具Luck启动错误
启动luke命令行下图错误 错误原因:luke版本和lucene版本不匹配,lucene5.3.0版本必须用luke5.3.0版本才能打开索引. 解决方法:更新luke版本即可. luke 所有版本下 ...
- (六)发送、接收SOAP消息(1)
一.为什么要用soap 原本我们使用web服务都是根据wsdl生成客户端(生成一堆java文件)然后再调用,本章节讲解如何用soap消息来替代这种方式. 二.SOAP消息格式 SOAP(简单对象访问协 ...
- Java02_数据类型
Java平台: Java API JVM 特点:可跨平台 Java运行机制: 编译(javac.exe) 运行(java.exe) JAVA文件 ---------->class文件(可跨平台的 ...
- VBA宏注释(四)
注释用于记录程序逻辑和用户信息,其他程序员将来可以阅读并理解相同的代码无缝工作. 它包括由开发者,修改者以及还可以包括合并逻辑的信息. 解释器在执行时忽略注释. VBA中的注释用两种方法表示,它们分别 ...
- Vue页面手动刷新,导航栏激活项还原到初始状态问题解决方案
场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容.问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterp ...
- 转载一篇有关于diff的文章,方便以后复习
本文章是转载的,为了方便以后复习,特地记录一下.他人请去原地址观看!!! 文章原地址:http://www.ruanyifeng.com/blog/2012/08/how_to_read_diff.h ...
- pkg-config命令
返回已安装库文件的元信息 pkg-config读取.pc文件获取信息 基本思想 编译的时候-I指定头文件路径:-L指定库文件路径.这样做总感觉很麻烦 事先把库的位置信息等保存起来,需要的时候再通过特定 ...
- SpringCloud之RabbitMQ消息队列原理及配置
本篇章讲解RabbitMQ的用途.原理以及配置,RabbitMQ的安装请查看SpringCloud之RabbitMQ安装 一.MQ用途 1.同步变异步消息 场景:用户下单完成后,发送邮件和短信通知. ...