本节我们来看一下 Sass 中的映射函数,Sass 中的映射是由键值对(key/value)组成。映射是不可变的,所以我们在对映射进行操作时,不会在原有映射中进行修改,而是返回一个新的映射对象。

map-get() 返回映射中指定键所对应的值
map-has-key() 判断映射是否有对应的键值,有则返回true,没有返回false
map-keys() 返回映射中所有键
map-values() 返回映射中所有的值
map-merge() 合并两个映射
map-remove() 移除映射中的指定键所对应的键值对

map-get()函数

map-get() 函数用于返回映射中指定键所对应的值。

示例:

下面定义了一个映射类型的变量 $map,这个变量中有三个键值对:

$map:("a": 1, "b":2, "c":3);

.one{
    content: map-get($map, "a");
}

编译成 CSS 代码:

.one {
  content: 1;
}

从输出的 CSS 代码可以看出,我们可以使用 map-get 函数来获取映射中指定键名所对应的值。

map-has-key()函数

map-has-key() 函数判断映射是否有对应的键值,有则返回true,没有返回false。

示例:
$map:("a": 1, "b":2, "c":3);

.one{
    content: map-has-key($map, "a");
}

编译成 CSS 代码:

.one {
  content: true;
}

map-keys()函数

map-keys() 函数返回映射中所有键。

示例:
$map:("a": 1, "b":2, "c":3);

.one{
    content: map-keys($map);
}

编译成 CSS 代码:

.one {
  content: "a", "b", "c";
}

map-values()函数

map-values() 函数返回映射中所有的值。map-values 函数的使用和 map-keys 函数类似,一个返回映射中所有的值,一个返回映射中所有的键。

示例:
$map:("a": 1, "b":2, "c":3);

.one{
    content: map-values($map);
}

编译成 CSS 代码:

.one {
  content: 1, 2, 3;
}

map-merge()函数

map-merge() 函数合并两个映射。

示例:
$map1:("a": 1, "b":2, "c":3);
$map2:("name": xkd, "age":18);
$new_map:map-merge($map1, $map2);

.one{
    content: map-keys($new_map);
}

编译成 CSS 代码:

.one {
  content: "a", "b", "c", "name", "age";
}

map-remove() 函数

map-remove() 函数移除映射中的指定键所对应的键值对。

示例:
$map: ("a": 1, "b":2, "c":3);
$map2:map-remove($map, a);

.one{
    content: map-keys($map2);
}

编译成 CSS 代码:

.one {
  content: "b", "c";
}

链接:https://www.9xkd.com/

06-25 13:33