Sass 映射函数

Posted 2021-06-27 书和咖啡

本节我们来看一下 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/