get-match-value-of-keys()

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

용도

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

사용법

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

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

$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	✔︎

로직

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

@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() 믹스인 호출)

3. 순환이 이루어지지 않은 경우, null을 반환

참고

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

• @function

• @each

• if()

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

• get-value-after-key()