> 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/first.md).

# first()

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

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

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

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

> first($list:**list**) → **any**

```css
$direction: left bottom right top;

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

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

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

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

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

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

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

1. 전달 받은 리스트의 첫번째 아이템을 추출&#x20;
2. 추출한 아이템 값을 반환

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

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

* [nth()](https://sass-lang.com/documentation/modules/list#nth)

{% hint style="info" %}
Sass의 List 자료형(Data Type)은 JavaScript의 Array와 유사합니다.
{% endhint %}

{% embed url="<https://sass-lang.com/documentation/modules/list>" %}