Sass 映射函數

本節我們來看一下 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/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章