first()

리스트의 첫번째 아이템 반환 유틸리티 함수

용도

리스트(list) 아이템 중 첫번째 아이템을 손쉽게 추출하고자 할 때 사용합니다.

사용법

first() 함수에 리스트(list)를 전달합니다.

first($list:list) → any

$direction: left bottom right top;

@debug first($direction); // left (리스트의 첫번째 아이템) 반환

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

맵(map)에서 키(key) 값을 아이템으로 하는 리스트(list)를 반환 받아, 첫번째 아이템을 추출하는 예시

@debug first(map-keys($colors)); // black (첫번째 컬러 이름) 반환

로직

first() 유틸리티는 다음의 로직에 의해 작성되었습니다.

@function first($list) {
  @return nth($list, 1);
}

1. 전달 받은 리스트의 첫번째 아이템을 추출

2. 추출한 아이템 값을 반환

참고

유틸리티 함수 로직에 사용된 Sass:list 함수는 다음과 같습니다.

• nth()

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

Sass: sass:listsass-lang.com