> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/utilities/list/get-match-value-of-keys.md).

# get-match-value-of-keys()

키(key) 집합(list)을 순환하여 일치하는 값을 최종 계산하여 반환하는 유틸리티 함수

## 용도 <a href="#use" id="use"></a>

전달 받은 키:값 리스트에서 키 값을 여러가지 값으로 받아 일치할 경우 최종 계산된 값을 반환하고자 할 때 사용합니다.

## 사용법 <a href="#usage" id="usage"></a>

전달 받은 값이 `b 30px` 키:값 리스트일수도 있고 `bottom 30px` 일 경우도 있다고 했을 때, 전달 가능한 키 값은 `b bottom` 이 됩니다. 즉, 조건이 충족할 경우 값을 반환하는데 사용합니다.

> get-match-value-of-keys($values:**list**, $keys:**list**) → **\[number, null]**

```javascript
$value: b 30px;

get-match-value-of-keys($value, bottom b); // → 30px
get-match-value-of-keys($value, top t); // → null
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|     $values     |   list   |      ✔︎      |               |
|      $keys      |   list   |      ✔︎      |               |

## 로직 <a href="#logic" id="logic"></a>

`get-match-value-of-keys()` 유틸리티는 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@function get-match-value-of-keys($values, $keys) {
  $value: null;

  @each $key in $keys {
    $value: if($value, $value, get-value-after-key($values, $key));
  }
  @return $value;
}
```

1. 전달 받은 값 리스트(`$values`)와, 키 리스트(`$keys`)를 분석
2. 키 리스트를 순환하여 값(`$value`)이 존재할 경우, \
   값 리스트에서 키의 다음에 위치한 값을 값으로 설정 ([get-value-after-key()](/scss-mixins/utilities/list/get-value-after-key.md) 믹스인 호출)
3. 순환이 이루어지지 않은 경우, `null`을 반환

## 참고 <a href="#reference" id="reference"></a>

유틸리티 함수 로직에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

* [@function](https://sass-lang.com/documentation/at-rules/function)
* [@each](https://sass-lang.com/documentation/at-rules/control/each)
* [if()](https://sass-lang.com/documentation/modules#if)

유틸리티 함수 로직에 사용된 자체 제작 모듈은 다음과 같습니다.

* [get-value-after-key()](/scss-mixins/utilities/list/get-value-after-key.md)