Sass函数:Sass Maps的函数-map-get($map,$key)

2021-03-15 10:34:55

参考地址 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。体验不强,也不好排错。其实如果我们自定义一个函数,另外加个判断,那就截然不同。


  • 2018-03-04 10:15:33

    HTTP代理协议 HTTP/1.1的CONNECT方法

    我们平时使用HTTP协议无非就是GET、POST这些方法,但是HTTP的内容远不止那些。今天就来说说HTTP代理使用的CONNECT。这个不是在网页开发上用的,如果没兴趣就跳过吧。

  • 2018-03-05 11:30:04

    iOS wkwebkit 播放HTML5 视频 全屏问题解决

    使用html5 的video标签播放视频的时候,限制视频的尺寸,在android上是没有问题的,但是在ios上发现,视频没有开始播放的时候还是好的,但是一旦播放开是,就会全屏,非常奇怪。

  • 2018-03-07 14:35:32

    centos7下yum安装ffmpeg

    安装EPEL Release,因为安装需要使用其他的repo源,所以需要EPEL支持 yum install -y epel-release

  • 2018-03-08 09:44:12

    前端性能监控:window.performance

    Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能,包括 Navigation Timing API和高分辨率时间数据。

  • 2018-03-08 09:44:15

    前端性能监控:window.performance

    Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能,包括 Navigation Timing API和高分辨率时间数据。

  • 2018-03-08 09:47:14

    ES6,Array.fill()函数的用法

    ES6为Array增加了fill()函数,使用制定的元素填充数组,其实就是用默认内容初始化数组。

  • 2018-03-08 09:53:39

    document.readyState

    一个document 的 Document.readyState 属性描述了文档的加载状态。