检查Sass Map中的值是否存在

Jea*_*eri 4 css sass

在下面的SASS代码片段中,我想检查地图是否有特定的密钥.如果没有,则返回默认值(在本例中#bbb)

@function contains($list, $var) {
    @return (false == index($list, $var));
}

$colors: (aaa: #aaa, bbb: #bbb);

$out: if(contains($colors, aaa), map-get($colors, aaa), #bbb);

body {
   color: $out;
}
Run Code Online (Sandbox Code Playgroud)

由于某种原因,它总是返回#bbb.我在这里做错了什么建议?

Mar*_*vin 7

第一个问题是,null如果找不到值,则返回值为:

@function contains($list, $var) {
    @return (null == index($list, $var));
}
Run Code Online (Sandbox Code Playgroud)

第二个问题涉及contains函数的语义.通常,如果在列表中找到值,则名为contains的函数应返回true,否则返回false(至少我希望如此):

@function contains($list, $var) {
    @return (null != index($list, $var));
}
Run Code Online (Sandbox Code Playgroud)

然后在地图上调用索引函数存在第三个问题.您必须传递一个键值对而不仅仅是该函数的键:

$out: if(contains($colors, aaa #aaa), map-get($colors, aaa), #bbb);
Run Code Online (Sandbox Code Playgroud)

现在它按预期工作,但为了完整起见,让我告诉你,已经有一个内置函数,它完全符合你试图用你的contains函数实现的功能; 在map_has_key($地图,$键):

$out: if(map-has-key($colors, aaa), map-get($colors, aaa), #bbb);
Run Code Online (Sandbox Code Playgroud)

  • TL; DR:`map-has-key($ colors,aaa)` (10认同)