今日將介紹４種 Introspection（）函數：
１. map-get($map,$key) 函數
２. map-has-key（$map,$key）函數
３. map-keys($map)函數
４. map-values($map)函數

1.map-get($map,$key) 函數

$map：定義好的map。
$key：需要遍歷的key。

根據 $key 參數，返回 $key 在 $map 中對應的 value 值。如果 $key 不存在 $map 中，將返回 null 值。

例如：

// scss //
$map-colors: (
    RED: #ff1500,
    ORANGE: #ff7b00,
    YELLOW: #fcda01,
    GREEN: #00ff2a,
    BLUE: #008cf8
);

.btn-dribble{
    font-size: 100px;
    color: map-get($map-colors,YELLOW);
  }

編｜
譯｜ 此時的 $key 鍵值 YELLOW 對應的值為 #fcda01。
後｜
　Ｖ

// css //
.btn-dribble {
  font-size: 100px;
  color: #fcda01;
}

當 $key 鍵值無在 $map 列表裡，則返回 NULL。

例如：

// scss //
$map-colors: (
    RED: #ff1500,
    ORANGE: #ff7b00,
    YELLOW: #fcda01,
    GREEN: #00ff2a,
    BLUE: #008cf8
);

.btn-dribble{
    font-size: 100px;
    color: map-get($map-colors,PINK);
  }

編｜
譯｜ 此時的 $key 鍵值 PINK 在 $map 裡無對應的值，則返回NULL。
後｜ !須注意在命令終端編譯時，此時並不會出現任何錯誤或警告信息。!
　Ｖ

// css //
.btn-dribble {
  font-size: 100px;
}

2.map-has-key（$map,$key）函數

將返回一個布爾值。
當 $map 中有這個 $key，則函數返回true，否則返回false。

例如：

// scss //
$map-colors: (
    RED: #ff1500,
    ORANGE: #ff7b00,
    YELLOW: #fcda01,
    GREEN: #00ff2a,
    BLUE: #008cf8
);

@if map-has-key($map-colors,PINK){
 .btn-dribble{
    font-size: 100px;
    color: map-get($map-colors,PINK);
  }
}@else {
    @warn "No color found for PINK in $map-colors map. Property ommitted."
}

編｜ 在此程式碼中找不到 $key 鍵值 PINK，則可以選擇使用map-has-key（$map,$key）
譯｜ 函數就可以出現提示訊息。
後｜
　Ｖ　

Warning:
No color found for PINK in $social-colors map. Property ommitted.

上述方法雖然解決了可以出現提示訊息的問題，但若每個鍵值都要打上@if @else，這樣會過於冗長，於是下面提供更簡略的方法給各位。

例如：

// scss //
$map-colors: (
    RED: #ff1500,
    ORANGE: #ff7b00,
    YELLOW: #fcda01,
    GREEN: #00ff2a,
    BLUE: #008cf8
);

@function colors($color){
    @if not map-has-key($map-colors,$color){
        @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
    }
    @return map-get($map-colors,$color);
}


.btn-RED {
    color: colors(RED);
}
.btn-ORANGE {
    color: colors(ORANGE);
}
.btn-YELLOW {
    color: colors(YELLOW);
}
.btn-GREEN {
    color: colors(GREEN);
}.btn-BLUE {
    color: colors(BLUE);
}

// .btn-RED 以下皆可用@each代替 //
// @each $social-network,$social-color in $map-colors {
    .btn-#{$social-network} {
        color: colors($social-network);
    }
} //

編｜
譯｜
後｜
　Ｖ

// css //
.btn-RED {
  color: #ff1500;
}

.btn-ORANGE {
  color: #ff7b00;
}

.btn-YELLOW {
  color: #fcda01;
}

.btn-GREEN {
  color: #00ff2a;
}

.btn-BLUE {
  color: #008cf8;
}

3.map-keys($map)函數

返回 $map 中的所有 $key，輸出結果爲一個列表。

例如：

// scss //
$map-colors: (
    RED: #ff1500,
    ORANGE: #ff7b00,
    YELLOW: #fcda01,
    GREEN: #00ff2a,
    BLUE: #008cf8
);

@function colors($color){
    $names: map-keys($map-colors);
    @if not index($names,$color){
        @warn "Waring: `#{$color} is not a valid color name.`";
    }
    @return map-get($map-colors,$color);
}
@each $social-network,$social-color in $map-colors {
    .btn-#{$social-network} {
        color: colors($social-network);
    }
}

// @function 以下皆可用@each及@for代替 //
// @each $name in map-keys($map-colors){
    .btn-#{$name}{
        color: colors($name);
    }
}
@for $i from 1 through length(map-keys($map-colors)){
    .btn-#{nth(map-keys($map-colors),$i)} {
        color: colors(nth(map-keys($map-colors),$i));
    }
} //

編｜
譯｜
後｜
　Ｖ

// css //
.btn-RED {
  color: #ff1500;
}

.btn-ORANGE {
  color: #ff7b00;
}

.btn-YELLOW {
  color: #fcda01;
}

.btn-GREEN {
  color: #00ff2a;
}

.btn-BLUE {
  color: #008cf8;
}

4.map-values($map)函數

返回 $map 中的所有 $value，輸出結果爲一個列表。