Sass函数：Sass Maps的函数-map-has-key($map,$key)

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);}
}

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

Sass函数：Sass Maps的函数-map-has-key($map,$key)相关推荐

Sass学习笔记 -- 初步了解函数、运算、条件判断及循环
函数 sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始.sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以li ...
Sass函数-Miscellaneous函数（三元条件函数）
在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似.他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值: if($cond ...
python中all函数的用法_python中map、any、all函数用法分析
这篇文章主要介绍了 python 中 map . any . all 函数用法 , 实例分析了 map . any . all 函数的相关使用技巧 , 具有一定参考借鉴价值 , 需要的朋友可以参考下 ...
python内置函数——sorted、filter、map、format
对List.Dict进行排序,Python提供了两个方法对给定的List L进行排序, 方法1.用List的成员函数sort进行排序,在本地进行排序,不返回副本方法2.用built-in函数sor ...
python 的几个内置函数（lambda ,zip, filter, map, reduce ）用法
1.lambda lambda其实就是一条语句,lambda(x):body.x是lambda函数的参数,参数可以有任意多个(包括可选参数);body是函数体,只能是一个表达式,并且直接返回该表达式的 ...
【Python学习】 - 关于DataFrame中的applymap函数和 Series中的map函数
在用pandas预处理数据时,难免需要自己构造一些有价值的数据,applymap函数和map函数对于处理此类问题十分方便. 给定一个DataFrame,含有每个学生的第一次考试和第二次考试的成绩,现在 ...
lambda函数+map函数的结合使用 list(map(lambda x: list(x)[0], X))
Q1:什么是lambda函数?怎么定义?有什么作用? 知识点:lambda 解析:lambda叫做匿名函数,是一种不需要提前对函数进行定义再使用的情况下就可以使用的函数 1 定义规则:冒号的左边是原函 ...
Python函数详解：函数定义、调用，lambda函数，高阶函数map,filter,reduce，函数式编程，模块化设计、代码复用、函数递归、enumerate()
一.函数函数是一段具有特定功能的.可重用的语句组,通过函数名来表示和调用. 函数是一段代码的抽象和封装函数是一段具有特定功能的.可重用的语句组函数是一种功能的抽象,表达特定功能两个作用:降低编 ...
[转载] Python 内置函数 lambda、filter、map、reduce
参考链接: Python lambda (匿名函数) | filter, map, reduce Python 内置了一些比较特殊且实用的函数,使用这些能使你的代码简洁而易读. 下面对 Python ...
java map函数指针_C 函数指针与回调函数
关于回调函数的一点思考在 A 函数中将参数与 C 函数传递给 B 函数,B函数调用 C 函数:B 函数调用的动作称为回调,C 函数称为回调函数. 举栗 #include // 回调函数a void ...

Sass函数：Sass Maps的函数-map-has-key($map,$key)

Sass函数：Sass Maps的函数-map-has-key($map,$key)相关推荐

最新文章

热门文章