map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key,则函数返回 true,否则返回 false。

前面的示例,当 $key 不在 $map 中时,使用 map-get($map,$key) 函数将返回一个 null 值。但对于开发人员,并看不到任何提示信息。如果使用 map-has-key($map,$key) 函数就可以改变这一状态。我们来看一个简单的示例。

@if map-has-key($social-colors,facebook){
.btn-facebook {
color: map-get($social-colors,facebook);
}
} @else {
@warn "No color found for faceboo in $social-colors map. Property ommitted."
}

编译出来:

.btn-fackbook{
color: #3b5998;
}

上面看到的示例是 facebook 这个 key 已存在 $social-colors 这个 map 当中。所以能正常编译。如果你手误,将 facebook 输错了:

@if map-has-key($social-colors,faceboo){
.btn-facebook {
color: map-get($social-colors,facebook);
}
} @else {
@warn "No color found for faceboo in $social-colors map. Property ommitted."
}

这个时候,你编译出来的 CSS 代码中,不会有新代码添加,但在命令终端可以看到提示信息:

WARNING: No color found for faceboo in $social-colors map. Property ommitted.
on line 25 of test.scss

是不是非常的友好。但总觉得这样写是傻傻的,总不可能每获取一个 key 都写一个 @if 语句吧。其实不用这么复杂,我们可以自定义一个函数,比如 colors():

@function colors($color){
@if not map-has-key($social-colors,$color){
@warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
}
@return map-get($social-colors,$color);
}

有了这个函数之后,我们就可以这样使用

.btn-dribble {
color: colors(dribble);
}
.btn-facebook {
color: colors(facebook);
}
.btn-github {
color: colors(github);
}
.btn-google {
color: colors(google);
}
.btn-twitter {
color: colors(twitter);
}
.btn-weibo {
color: colors(weibo);
}

编译出来的 CSS:

.btn-dribble {
color: #ea4c89;
} .btn-facebook {
color: #3b5998;
} .btn-github {
color: #171515;
} .btn-google {
color: #db4437;
} .btn-twitter {
color: #55acee;
}

同时你不难发现,命令终端提示信息:

WARNING: No color found for `weibo` in $social-colors map. Property omitted.
on line 13 of test.scss

那是在 $social-colors 这个 map 中没有 weibo 这个 key。是不是很有意思。

当然,如果你对 Sass 的指令熟悉的话,上面编译出来的 CSS 可以使用 @each:

@each $social-network,$social-color in $social-colors {
.btn-#{$social-network} {
color: colors($social-network);
}
}

Sass函数:Sass Maps的函数-map-has-key($map,$key)的更多相关文章

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

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

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

    map-get($map,$key) 函数的作用是根据 $key 参数,返回 $key 在 $map 中对应的 value 值.如果 $key 不存在 $map中,将返回 null 值.此函数包括两个 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  10. Python小白学习之路(十五)—【map()函数】【filter()函数】【reduce()函数】

    一.map()函数 map()是 Python 内置的高阶函数 有两个参数,第一个是接收一个函数 f(匿名函数或者自定义函数都OK啦):第二个参数是一个 可迭代对象 功能是通过把函数 f 依次作用在 ...

随机推荐

  1. __getattr__属性查找

    from datetime import date """ __getattr__ : 在查找不到对象的属性时调用 __getattribute__ : 在查找属性之前调 ...

  2. redis学习 --Sorted Set

    一.概述: Sorted Set(有序集合)和Set类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted Set中的每一个成员都会有一个分数(sc ...

  3. Win10真正好用之处

    第一步.  关闭无用服务 刚装好Win10的时候,整部电脑响应很慢,有时什么都不做,硬盘灯也能狂闪半天.很明显,这是微软爸爸默认开启的服务未被及时关闭所致. 网上有很多文章指导新手如何关闭系统服务,但 ...

  4. CSS页面乱码 GB2312、UTF-8格式问题解决方案

      如同左图所现,出现了页面乱码问题本来应该是显示gb3212字符的"关闭"文字了.. 解决方案一: 在所调用的CSS页面的第一行添加下边的这一句代码, 注意:一定要是在CSS的头 ...

  5. windowns环境下mysql 安装教程

    windowns环境下mysql 安装教程 一:这里以绿色版安装为例(解压就可以使用) 下载地址: 下载页面:https://dev.mysql.com/downloads/mysql/  2:点击 ...

  6. Linux 软件安装到哪里合适,目录详解

    文章来源: https://blog.csdn.net/qq_22771739/article/details/83933473 Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有 ...

  7. mysql_DML_索引、视图

    创建索引的语法格式:– 创建普通索引:• create index 索引名称 on 表名(列)• alter table 表名 add index 索引名称 (列)– 创建唯一索引:• create ...

  8. mysql_DML_select_升序降序去重

    select *from wsb   limit 5;显示前5行 select *from students LIMIT  (m,n) (其中m是指记录开始的index,从0开始,表示第一条记录n是指 ...

  9. CentOS7 - 安装 MariaDB

    1 安装并启动 MariaDB MariaDB 采用 Percona 的 XtraDB 存储引擎替代 MySQL 的 InnoDB,XtraDB 完全兼容 InnoDB. 1.1 安装 MySQL 与 ...

  10. 设置chrome解决跨域问题

    开发中遇到跨域问题, 解决方法一 以关闭安全验证模式启动chrome,就不会报跨域了  开发阶段,用这个方式是可以的,不然他需要后台配置成 * , 发布会有风险  设置方法:  --disable-w ...