Sass函数:Sass Maps的函数-map-get($map,$key)
map-get($map,$key) 函数的作用是根据 $key 参数,返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中,将返回 null 值。此函数包括两个参数:
- $map:定义好的 map。
- $key:需要遍历的 key。
来看一个简单的示例,假设定义了一个 $social-colors 的 map:
$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
假设要获取 facebook 键值对应的值 #3b5998,我们就可以使用 map-get() 函数来实现:
.btn-dribble{
color: map-get($social-colors,facebook);
}
编译出来的CSS:
.btn-dribble {
color: #3b5998;
}
我们来看另一种情况,假设 $social-colors 这个 map 没有 $weibo 这个 key:
.btn-weibo{
font-size: 12px;
color: map-get($social-colors,weibo);
}
此时编译出来的是CSS:
.btn-weibo {
font-size: 12px;
}
从 编译出来的 CSS 可以得知,如果 $key 不在 $map 中,不会编译出 CSS,其实在 Sass 中,map-get($social- colors,weibo) 返回了一个 null 值。但在编译出来的 CSS 中,你只知道他没有编译出样式,而且在命令终端编译时,也没有任何错误或者警告信息。说实话,你并不知道他为什么编译不出来样式,或者说他已返回了值为 null。体验不强,也不好排错。其实如果我们自定义一个函数,另外加个判断,那就截然不同。
Sass函数:Sass Maps的函数-map-get($map,$key)的更多相关文章
- Sass Maps的函数-map-keys($map)
map-keys($map) 函数将会返回 $map 中的所有 key.这些值赋予给一个变量,那他就是一个列表.如: map-keys($social-colors); 其返回的值为: "d ...
- Sass函数:Sass Maps的函数-map-has-key($map,$key)
map-has-key($map,$key) 函数将返回一个布尔值.当 $map 中有这个 $key,则函数返回 true,否则返回 false. 前面的示例,当 $key 不在 $map 中时,使用 ...
- Sass Maps的函数-map-remove($map,$key)、keywords($args)
map-remove($map,$key) map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key,从而得到一个新的 map.其返回的值还是一个 map.他并不 ...
- Sass Maps的函数-map-values($map)、map-merge($map1,$map2)
map-values($map) map-values($map) 函数类似于 map-keys($map) 功能,不同的是 map-values($map )获取的是 $map 的所有 value ...
- Sass函数-Miscellaneous函数(三元条件函数)
在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似.他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值: if($cond ...
- 匿名函数、高阶函数以及map
最近学习的知识点 # 匿名函数 n = lambda name:name+"_a" print(n("alex")) # 高阶函数 # 1.参数有函数 2.返回 ...
- python_08 函数式编程、高阶函数、map、filter、reduce函数、内置函数
函数式编程 编程方法论: 1.面向过程 找到解决问题的入口,按照一个固定的流程去模拟解决问题的流程 (1).搜索目标,用户输入(配偶要求),按照要求到数据结构内检索合适的任务 (2)表白,表白成功进入 ...
- 内置函数二(lambda函数,sorted(),filter(),map(),递归函数,二分法查找)
一,匿名函数 lambda表⽰示的是匿名函数. 不需要⽤用def来声明, ⼀一句句话就可以声明出⼀一个函数 语法: 函数名 = lambda 参数: 返回值 注意: 1. 函数的参数可以有多个. ...
- Python之路(第七篇)Python作用域、匿名函数、函数式编程、map函数、filter函数、reduce函数
一.作用域 return 可以返回任意值例子 def test1(): print("test1") def test(): print("test") ret ...
- 6.1 函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数
函数的返回值: 函数一旦执行到 return,函数就会结束,并会返回return 后面的值,如果不使用显式使用return返回,会默认返回None . return None可以简写为 r ...
随机推荐
- Spring Boot Shiro
Shiro 核心 API Subject:用户主体(每次请求都会创建Subject). principal:代表身份.可以是用户名.邮件.手机号码等等,用来标识一个登录主体的身份. credentia ...
- AutoLayout面试题记录-用NSLayoutConstraint写动画
import UIKit class ViewController: UIViewController { @IBOutlet weak var topY: NSLayoutConstraint! @ ...
- action function
Action委托具有Action<T>.Action<T1,T2>.Action<T1,T2,T3>……Action<T1,……T16>多达16个的重载 ...
- CF286E Ladies' Shop FFT
题目链接 读完题后,我们发现如下性质: 在合法且和不超过 $m$ 的情况下,如果 $a_{i}$ 出现,则 $a_{i}$ 的倍数也必出现. 所以如果合法,只要对所有数两两结合一次就能得到所有 $a_ ...
- Codeforces 830A. Office Keys (贪心二分 or DP)
原题链接:http://codeforces.com/contest/830/problem/A 题意:在一条数轴上分别有n个人和k把钥匙(n<=k),以及一个目的地,每个人要各自拿到一个钥匙后 ...
- ECharts t图表组件使用心得
1.使用较多的是“柱状图”和“折线图”: 2.数据列的展示不能够直接输入字符串,正确的做法是将字符串转换成数字类型,这样在生成的图表上才会显示最大值和最小值: 3.对上 1 点的补充,数据列应该使用数 ...
- MySQL5.7.21报错:[Err] 1055
[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated c ...
- 前端工具-gulp-ruby-sass-解决带有中文路径报错(incompatible character encodings GBK and UTF-8)
注意:错误提示真的是非常重要的!!! 今天 gulp 一个外国人的项目时编译 sass 时提示 Encoding::CompatibilityError: incompatible character ...
- Red Hat Linux下安装JDK
1. 下载Linux平台的JDK 下载对应操作系统的jdk,操作系统是32位的就下32位的jdk,64位的就下64位的jdk.下错了装不上的. 下载地址:http://www.Oracle.com/t ...
- 批处理脚本学习笔记1--vmware虚拟机启停控制
起因 因工作需要,在WIN10笔记本上通过vmware workstation装了两台CentOS虚机(CentOS_1.CentOS_2),经常需要进行虚机的启停切换操作,通过vmware的控制台操 ...