get-value-after-key()

리스트(`키 값` 형식)에서 값을 추출해 반환하는 유틸리티 함수

용도

키1 값1 키2 값2 ... 형식의 리스트(list)에서 키 뒤에 나오는 값을 추출해야 할 경우 사용합니다.

사용법

get-value-after-key() 함수에 키 값 형식의 리스트(list)와 키(key)를 전달합니다.

get-value-after-key($list:list, $key:string) → any

$key-value-list: z-index 10 right -34px bottom 0;

@debug get-value-after-key($key-value-list, right); // -34px 반환

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$list	list	✔︎
$key	string	✔︎

로직

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

@function get-value-after-key($key-value-list, $key) {
  $key-index: index($key-value-list, $key);
  @return if($key-index, nth($key-value-list, $key-index + 1), null);
}

1. 전달 받은 키의 인덱스가 전달 받은 리스트의 몇 번째인지 검토

2. 리스트 안에 키가 포함되어 있다면? 키의 다음 인덱스(+1) 값을 추출해 반환

3. 리스트 안에 키가 포함되어 있지 않다면? null을 반환

참고

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

• @function

• if()

• index()

• nth()

Sass의 List 자료형(Data Type)은 JavaScript의 Array와 유사합니다.

Sass: sass:list