[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 扩展语言. 特征 兼 ...
随机推荐
- js时间戳与日期格式之间相互转换
###js时间戳与日期格式之间相互转换 将时间戳转换成日期格式 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法, ...
- 1269: 划分数(Java)
WUSTOJ 1269: 划分数 参考博客 果7的博客 题目 将 1 个数 n 分成 m 份,求划分的种数.更多内容点击标题. 分析 唯一需要注意的地方是不考虑顺序.其他的直接看代码即可. 代 ...
- c++设计原则:继承与组合
“优先使用对象组合,而不是继承”是面向对象设计的原则之一. 组合也叫“对象持有”,就是在类中定义另一类型的成员,继承会破坏类的独立性,增加系统的复杂性,一般系统的继承层次不超过3层.组合拥有良好的扩展 ...
- pandas 索引笔记
import pandas as pd import numpy as np s = pd.Series(np.random.rand(5), index=list('abcde')) # 创建序列, ...
- 使用HSE配置系统时钟并用MCO输出监测系统时钟
使用模板,在User下新建文件夹RCC 新建bsp_rccclkconfig.h和bsp_rccclkconfig.c 工程和魔术棒添加 对照着上节的RCC源文件编写: void HSE_SetSys ...
- s5p6818 Overview
S5P6818: 64bit Octa-Core, High Performance, Advanced 3D Graphics, Full-HD Multimedia Video, A53 Core ...
- MVC5项目转.Net Core 2.2学习与填坑记录(1)
流程都是自己摸索,错误地方随便指正... 老项目过于臃肿,并且所有请求都是提交到一个api中,这样当api挂掉的时候,基本所有的项目都瘫痪掉了. 在4月底的时候,下决心将项目用微服务进行重写,刚开始的 ...
- Post请求数据传到后台+号变成了空格
问题: 今天遇到一个问题:页面带有"+"号的数据,传到服务端接口,结果+号变成了空格.例如:传“1+1”变成了"1 1". 解决办法: 方案一: 将“+”号替换 ...
- flex应用实例
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- CSS过渡效果transition和动画
一.过渡效果 可以在不适用Flash和js 的情况下实现过渡效果 属性 描述 transition 简写属性,用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的c ...