博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Sass函数:Sass Maps的函数-map-get($map,$key)
阅读量:6901 次
发布时间:2019-06-27

本文共 914 字,大约阅读时间需要 3 分钟。

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

转载于:https://www.cnblogs.com/qjuly/p/9116906.html

你可能感兴趣的文章
int 和 Integer 有什么区别
查看>>
english单词笔记 001
查看>>
CPU和GPU的区别
查看>>
linux 打包 | autoconf 使用方法
查看>>
linux 上zookeeper安装
查看>>
JSON简介及Java对JSON的解析
查看>>
Candy
查看>>
CentOS 6.4 搭建 ntop 网络流量监控分析平台
查看>>
暑期第一弹<搜索> B - Dungeon Master(三维BFS,6个状态)
查看>>
codeforces Problem-518D:Ilya and Escalator(概率dp)
查看>>
flask—信号(blinker)
查看>>
[LeetCode] NO. 66 Plus One
查看>>
基于jwt和角色的访问控制解决方案
查看>>
C# 测试 SQL SERVER 是否能正常连接【转】
查看>>
GDI资源使用上需要注意的一点
查看>>
也来说说C/C++里的volatile关键字
查看>>
java Sokcet编程(四)--对Socket的认识
查看>>
nginx静态服务器的配置
查看>>
Android在导航栏添加音量加减按钮安卓源码案例
查看>>
【模板】普通平衡树 Splay
查看>>