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

时间: 2024-11-01 20:30:22

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

Sass Maps的函数

Sass Maps的函数 前面介绍了使用 map 来管理变量,但要在 Sass 中获取变量,或者对 map 做更多有意义的操作,我们必须借助于 map 的函数功能.在 Sass 中 map 自身带了七个函数: map-get($map,$key):根据给定的 key 值,返回 map 中相关的值. map-merge($map1,$map2):将两个 map 合并成一个新的 map. map-remove($map,$key):从 map 中删除一个 key,返回一个新 map. map-key

sass学习--sass的函数功能(进阶篇)

1.字符串功能: unquote($string):删除字符串中的引号: quote($string):给字符串添加引号: To-upper-case($string):将字符串小写字母转换为大写字母 To-lower-case($string):将字符串大写字母转换为小写字母 unquote($string): //sass:unquote($string) .test2 { content: unquote("'Hello Sass!"); } .test3 { content:

Sass学习笔记 -- 初步了解函数、运算、条件判断及循环

函数 sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始.sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比. //scss $baseFontSize:      10px !default; $gray:    

10天精通Sass 之 Sass列表函数

列表函数主要有: length($list):返回一个列表的长度值: nth(list,n):返回一个列表中指定的某个标签值 join(list1,list2, [$separator]):将两个列给连接在一起,变成一个列表: append(list1,val, [$separator]):将某个值放在列表的最后: zip($lists-):将几个列表结合成一个多维的列表: index(list,value):返回一个值在列表中的位置值. length($list)返回一个列表的长度值 .spa

10天精通Sass 之 Sass颜色函数

Sass中颜色函数主要分为RGB.HSL和Opacity三大函数. RGB颜色函数 [ ] rgb(red,green, $blue)将RGB颜色转换成十六进制颜色 [ ] rgba(color,alpha)将十六进制颜色和透明度值转换成RGBA颜色 [ ] red($color):从一个十六进制的颜色中获取其中的红色 [ ] green($color):从一个十六进制的颜色中获取其中绿红色 [ ] blue($color):从一个十六进制的颜色中获取其中的蓝色 [ ] mix(color1,c

Python 学习笔记 -- 内嵌函数、闭包、匿名函数、高阶函数map、高阶函数filter、高阶函数reduce

1 #------------------------------内嵌函数------------------------------ 2 #内嵌函数就是在函数内部定义函数 3 #实例一 4 print("#------------------------------内嵌函数------------------------------") 5 def funOutOne(): 6 x = 5 7 def funIn(): 8 x = 3 9 print("My funOutO

匿名函数与内置函数filter()、map()、reduce()的用法

首先是一个正常的函数,能够正常的传参数 def sayhi(n): print(n) sayhi(3) 匿名函数传参数: (lambda n:print(n)) (2) calc=lambda n:print(n) calc(6) #处理三元运算符 calc=lambda n:3 if n<4 else n print(calc(1)) 注:lambda里面不能处理for循环之类的复杂运算 lambda单独使用的不多,需要结合使用 例如:结合filter()函数 filter()函数:一组数据里

十一、python沉淀之路--map函数、filter函数、reduce函数、匿名函数、内置函数

一.map函数 1.自定义函数,实现类似于map函数的功能 1 num_l = [1,3,4,5,6,9] 2 def power(n): 3 return n ** 2 4 def map_test(func,array): 5 li0 = [] 6 for i in array: 7 p = func(i) 8 li0.append(p) 9 return li0 10 11 f = map_test(power,num_l) 运用自己定义的函数来计算 12 print(f) 13 f =

Python之路Python作用域、匿名函数、函数式编程、map函数、filter函数、reduce函数

Python之路Python作用域.匿名函数.函数式编程.map函数.filter函数.reduce函数 一.作用域 return 可以返回任意值例子 def test1(): print("test1") def test(): print("test") return test1 res = test() print(res) 输出结果 test <function test1 at 0x021F5C90> 分析:这里print(res)输出的是te

函数作用域,匿名函数,map,filter,reduce---Python重新开始第五天

函数作用域 函数的作用域只跟函数声明时定义的作用域有关,跟函数的调用位置无任何关系 1 name='alex' 2 3 def foo(): 4 name='lhf' 5 def bar(): 6 name='wupeiqi' 7 print(name) 8 def tt(): 9 print(name) 10 return tt 11 return bar 12 13 # bar=foo() 14 # tt=bar() 15 # print(tt) 16 # tt() 17 r1 = foo(