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)的更多相关文章

  1. Sass Maps的函数-map-keys($map)

    map-keys($map) 函数将会返回 $map 中的所有 key.这些值赋予给一个变量,那他就是一个列表.如: map-keys($social-colors); 其返回的值为: "d ...

  2. Sass函数:Sass Maps的函数-map-has-key($map,$key)

    map-has-key($map,$key) 函数将返回一个布尔值.当 $map 中有这个 $key,则函数返回 true,否则返回 false. 前面的示例,当 $key 不在 $map 中时,使用 ...

  3. Sass Maps的函数-map-remove($map,$key)、keywords($args)

    map-remove($map,$key) map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key,从而得到一个新的 map.其返回的值还是一个 map.他并不 ...

  4. Sass Maps的函数-map-values($map)、map-merge($map1,$map2)

    map-values($map) map-values($map) 函数类似于 map-keys($map) 功能,不同的是 map-values($map )获取的是 $map 的所有 value ...

  5. Sass函数-Miscellaneous函数(三元条件函数)

    在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似.他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值: if($cond ...

  6. 匿名函数、高阶函数以及map

    最近学习的知识点 # 匿名函数 n = lambda name:name+"_a" print(n("alex")) # 高阶函数 # 1.参数有函数 2.返回 ...

  7. python_08 函数式编程、高阶函数、map、filter、reduce函数、内置函数

    函数式编程 编程方法论: 1.面向过程 找到解决问题的入口,按照一个固定的流程去模拟解决问题的流程 (1).搜索目标,用户输入(配偶要求),按照要求到数据结构内检索合适的任务 (2)表白,表白成功进入 ...

  8. 内置函数二(lambda函数,sorted(),filter(),map(),递归函数,二分法查找)

    一,匿名函数 lambda表⽰示的是匿名函数. 不需要⽤用def来声明, ⼀一句句话就可以声明出⼀一个函数 语法:    函数名 = lambda 参数: 返回值 注意: 1. 函数的参数可以有多个. ...

  9. Python之路(第七篇)Python作用域、匿名函数、函数式编程、map函数、filter函数、reduce函数

    一.作用域 return 可以返回任意值例子 def test1(): print("test1") def test(): print("test") ret ...

  10. 6.1 函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数

      函数的返回值: 函数一旦执行到   return,函数就会结束,并会返回return 后面的值,如果不使用显式使用return返回,会默认返回None . return None可以简写为   r ...

随机推荐

  1. Codeforces 845D - Two TVs(贪心)

    原题链接:http://codeforces.com/problemset/problem/845/D 题意:一个人在驾照考试中,路边有“限速XX”.“没有限速”.“可以超车”.“不能超车”路牌, 以 ...

  2. 20180705-Java基础语法

    Java基础语法 一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条 ...

  3. 学习日记7、mvc +easyui datagrid excel上传

    1.首先获取datagrid所有行的数据 var rows = $("#List").datagrid("getRows"); 2.进行数据转换转化成JSON格 ...

  4. map()函数用法

    需求:已知两个列表,现在要一个列表中的元素,分别全部插入另一个列表中,新列表是[[0, 9, 1], [0, 9, 2], [0, 9, 3], [0, 9, 4], [0, 9, 5], [0, 9 ...

  5. R语言rvest包网络爬虫

    R语言网络爬虫初学者指南(使用rvest包) 钱亦欣 发表于 今年 06-04 14:50   5228 阅读   作者 SAURAV KAUSHIK 译者 钱亦欣 引言 网上的数据和信息无穷无尽,如 ...

  6. 移动端rem布局屏幕适配插件(放js中便可使用)

    /* doc:不用管:document对象 win:不用管:window对象 design:注意:设计稿的尺寸/物理像素*/ (function (doc, win,design) {// alert ...

  7. ANTLR4的IntelliJ IDEA配置

    1.配置的先导工作 jdk配置 IntelliJ IDEA安装配置 配置好ANTLR的java运行时环境,参考 2.下载intellij-plugin-v4.zip 下载地址 3.插件安装 4.测试安 ...

  8. mooc-IDEA 关联Spring&DB --011

    Local history寻找修改轨迹 右击项目->local history->show history 显示修改了哪些东西,可通过对比文件,查看修改点. put lable...类似于 ...

  9. Django 无法通过request.POST.get()获取数据的问题

    原来是contentType为application/json时,Django不支持request.POST.get(),但可以通过request.body来获取string类型的参数: data = ...

  10. c语言1博客作业12-学期总结

    一.我学到的内容 二.收获总结 2.1我的收获 链接: c语言1博客作业01:https://www.cnblogs.com/dy-985211/p/11578914.html c语言1博客作业02: ...