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-08-26 00:18:04

    RecyclerView 图片错位空白的问题

    1.图片错位的原因是因为图片异步记载返回去展示出的问题。图片空白，是item刷新，请求图片时间上的问题。 2。viewHolder.setIsRecyclable(false); 就没有tag，不设置 就有tag，但是有没有没啥区别 设置tag，

  • 2018-08-28 10:00:24

    laravel使用队列的简单步骤

    最近需要导入大量的excel文件，数量达到十万之多。 而我又不想修改服务器的超时时间，因为这样可能影响服务器的堵塞。 而php又没有很好的异步。 后来发现了令laravel最为骄傲的部分，队列。具体文档参考下方链接。

  • 2018-08-28 14:19:58

    php如何配置上传较大文件

    　在php中判断上传文件的大小，但是文件一但过大，print_r($_FILES);的值就变为null了,有时候大家会遇到这么一个问题，上传小文件 时，PHP能正常获取到，但是文件一超过8M就变为空了，我在做项目的时候，就遇到这样的问题，我刚开始把最大上传文件值改为20M,在PHP.INI里 面。

  • 2018-08-28 15:09:50

    JAVA中MAP值保持顺序不变

    今天在进行JAVA开发过程中，因需要使用MAP来存放数据，同时希望MAP中KEY的顺序与放入顺序保持一致。 在使用HashMap之后，发现KEY的顺序是乱序的，每次打印还不太一样。上网查询资料之后发现：