[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 扩展语言. 特征 兼 ...
随机推荐
- ARTS第七周打卡
Algorithm : 做一个 leetcode 的算法题 ////////////////////////////////////////////////////////////////////// ...
- Django导出数据为Excel,调用浏览器下载
1. 环境 Django (2.1.10) + Python3.6 + xlwt (1.3.0) 操作系统使用的为:Windows 7 2. 接口代码 def now_export(request): ...
- PAT(B) 1018 锤子剪刀布(C:20分,Java:18分)
题目链接:1018 锤子剪刀布 分析 用一个二维数组保存两人所有回合的手势 甲乙的胜,平,负的次数刚好相反,用3个变量表示就可以 手势单独保存在signs[3]中,注意顺序.题目原文:如果解不唯一,则 ...
- GPIO输入—按键检测(开关控制小灯)
本次的代码全是在上次代码之上添加的. 1.user下新建文件夹key,新建bsp_key.h bsp_key.c文件. 2.keil项目添加bsp_key.c,魔术棒C/C++中include pat ...
- Go学习路径--相关基础
现在开始接触Go一段时间了,基本路径就是看基础学习材料,开始写项目,有问题找解决问题的方法.这里记录一下学习过程. go相关文章 Golang适合高并发场景的原因分析 go build 不同系统下的可 ...
- BZOJ3879 SvT(后缀树+虚树)
对反串建SAM得到后缀树,两后缀的lcp就是其在后缀树上lca的len值,于是每次询问对后缀树建出虚树并统计答案即可. #include<iostream> #include<cst ...
- Android Studio 代码页跳界面 /java和XML快速切换技巧
https://www.cnblogs.com/simadi/p/6698666.html?utm_source=itdadao&utm_medium=referral 今天又发现了一个And ...
- .NET Core中使用读取配置文件
引入Nuget的两个类库 Microsoft.Extensions.Configuration Microsoft.Extensions.Configuration.Json 使用 var build ...
- vue-cli中eslint配置
在项目目录下找到.eslintrc.js文件,使用编辑器打开进行编辑.在rules下添加space-before-function-paren.space-before-blocks.及semi的配置 ...
- DataGridView绑定数据、删除数据
定义学生类: using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...