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. python-数据驱动

    1.parameterized.parameterized import unittest from parameterized import parameterized,param class Te ...

  2. Selenium-WebDriverApi介绍

    浏览器操作: #刷新 driver.refresh() from selenium import webdriver driver=webdriver.Chrome() driver.get('htt ...

  3. rk3328编译Linux固件

    一.编译 Linux 固件 这一章将介绍编译 ROC-RK3328-CC Linux 固件的整个流程. 1.1 准备工作 Linux 固件在如下的环境中编译: Ubuntu 16.04 amd64 安 ...

  4. AGC040

    AGC040 A 模拟. B 因为顺序无关紧要,所以可以先把区间按右端点排序方便处理. 设第一个区间在\(A\)集合,考虑枚举第一个在\(B\)集合的区间\(i\),这样两个集合的右端点\(\min\ ...

  5. Python_011(生成器)

    一.生成器 def func(): ") return 222 ret = func() print(ret) #结果 111 222 1)这里面函数体里是返回值return;如果将retu ...

  6. linux centos添加yum镜像

    下载配置文件,加入/etc/yum.repos.d/阿里镜像:http://mirrors.aliyun.com/repo/Centos-7.repo网易镜像:http://mirrors.163.c ...

  7. random、os、时间模块

    一.random 模块 1.随机小数 random.random()   #产生大于0且小于1之间的小数 random.uniform(1,3)   #产生1到3之间的随机小数 2.随机整数 rand ...

  8. CDN:BootCDN

    ylbtech-CDN:BootCDN BootCDN稳定.快速.免费的前端开源项目 CDN 加速服务共收录了 3351 个前端开源项目 1. 推荐返回顶部 1. bootstrap Bootstra ...

  9. linux暴露端口可以被外部访问

    linux暴露端口可以被外部访问,把端口号换成要暴露的端口:/sbin/iptables -I INPUT -p tcp --dport 3306 -j ACCEPT Centos 7 开启端口Cen ...

  10. js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)

    值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage,成功后返回:  res.localIds用于上传图片使用    上传图片:wx.uploadImage. 2.上传图片的时候 ...