Sass基礎學習No.8-index()、nth()及map-get()快速查找陣列或物件值

發表於 更新於 分類於 ，

了解一下：CSS3選擇器「:nth-child(an+b)」快速選擇單雙或倍數元素

index()、nth()及map-get()這些都是來尋找陣列中不同的東西，之後慢慢介紹。

List Functions

index(陣列變數名,尋找值)查詢索引值結合nth(陣列變數名, 索引值)找出陣列變數值

1
2
3
4
5
6
$arr: blue, red, green, yellow, purple
$arrgreen: index($arr,green)

.index-green
    color: $arrgreen
    background: nth($arr,$arrgreen)
1
2
3
4
5
/*編譯結果CSS*/
.index-green {
  color: 3;
  background: green;
}

首先必須有一個陣列(廢話)，從樣式color中所帶出來的CSS，會發現：

  • index($arr,green)帶出一個數字，這個數字就是我們要尋找的陣列$arr中green的索引值，而非是樣式。
  • 之後透過nth($arr,$arrgreen)帶出一個顏色，這個顏色就是從陣列$arr中找尋索引值為3的值。

還要再多寫1個索引值變數很麻煩，可以直接寫 background: nth($arr,index($arr,green))。

在Sass中索引值是從1開始計算的喔！

Map Functions

在w3school中如此介紹：

the map data type represents one or more key/value pairs.
Sass maps are immutable (they cannot change). So, the map functions that return a map, will return a new map, and not change the original map.

創建物件(key-value)並用map-get(物件變數名,尋找的key)

透過 變數名:{key1:value1,key2:value2,key3:value3,...} 來創建一個Map物件。

1
2
$font-sizes: ('small': 12px, 'normal': 18px, 'large': 24px)
font-size: map-get($font-sizes,'small')
1
2
3
4
/*編譯的CSS結果*/
.index-green {
  font-size: 12px;
}

$font-sizes就是Map物件，'small'就是要尋找的key名，透過map-get($font-sizes,'small')找出在$font-sizes裡面key為'small'的值，也就是12px。

更多的map-get()介紹參考卡斯伯的Sass map get

更多的Map Function使用

  1. map-has-key(map, key)得出布林值，在map物件中是否存在這個key。
  2. map-keys(map)帶出map物件中所有的key-value。
  3. map-values(map)得到map物件中所有value。
  4. map-merge(map1, map2)將2個map物件結合起來變成一個新的物件(一個新變數)，但原本的map1, map2並不會被改變。
  5. map-remove(map, key1,key2,...)從map物件中移除key1及key2的key-value。

上面另外的Map Function中，項目1-3是可以直接作為樣式值帶入，如 color: 項目1-3，但是4跟5是產生新的物件，並不能直接被帶入樣式值喔，必須借助其他的Function才行。

物件要用()包起來，但是陣列不用喔！物件裡面可以在用()包裹物件，如$obj:(active:($color:green,$background:red,...),(...),...)

除了參考w3school外，也可以看看YamiOdymel的Sass 中的陣列（List）、物件（Map）。