[SCSS] SCSS 리스트(List)

리스트(List)

• SCSS 고유의 데이터 타입 중 하나로 여러 값을 하나로 묶어놓은 컬렉션 데이터 타입
• CSS 속성값 중 여러 값이 들어가는 경우(margin: 10px 20px 30px;)와 비슷한 개념
• 배열과 비슷하지만 SCSS 문법에서는 쉼표(,) 또는 공백( )로 값을 구분할 수 있음
• 순서가 중요하며, 인덱스를 통해 특정 값을 참조할 수 있음

---

리스트 타입

리스트 타입	구분자	특징
쉼표 리스트	,	- 값들을 명확히 구분 - 함수 인자로 주로 사용 - CSS에서 그대로 쓰면 쉼표가 유지됨(예: box-shadow: 1px 1px red, 2px 2px blue;)
공백 리스트	공백	- 공백으로 구분 - 주로 CSS 속성 값처럼 사용 가능 - CSS에서 쓰면 공백으로 이어진 값처럼 나옴(예: margin: 1px 2px 3px;)

$spacing: 5px 10px 15px;      // 공백 리스트
$colors: red, green, blue;    // 쉼표 리스트

---

nth() 함수 사용 시

• nth() 함수는 인덱스를 기준으로 요소를 꺼내는 함수라서, 쉼표 리스트든 공백 리스트든 내부 구조를 무시하고 순서대로 접근 가능.
• nth() 접근은 동일하게 동작: 1부터 시작하는 인덱스로 순서대로 값을 꺼낼 수 있음

$comma-list: 1, 2, 3;
$space-list: 1 2 3;

nth($comma-list, 2); // 2
nth($space-list, 2); // 2

---

함수 인자로 전달할 때 차이

• SCSS에서 함수 인자로 리스트를 전달하면, 쉼표와 공백 리스트의 구분이 의미를 가질 수 있음.
• 쉼표로 구분하면 각각이 별도의 인자로 전달,
• 공백으로 구분하면 하나의 리스트 값으로 전달됨.
• 즉 함수 인자에서 쉼표와 공백은 결과에 차이를 만들 수 있음.

@function test($list) {
  @return $list;
}

$result1: test(1, 2, 3); // 인자 3개로 처리 → 쉼표 리스트와 다르게 처리됨
$result2: test(1 2 3);   // 인자 1개 → 공백 리스트로 처리됨

---

출력에서 차이

• 쉼표 리스트는 쉼표가 그대로 출력됨 → CSS에서 여러 값으로 인식될 수 있음
• 공백 리스트는 공백으로 출력됨 → CSS 속성값처럼 자연스럽게 이어짐

$comma-list: red, green, blue;
$space-list: red green blue;

.box1 {
  color: $comma-list; // red, green, blue
}

.box2 {
  margin: $space-list; // red green blue
}

---

리스트 변환 및 출력

• 리스트를 CSS 속성에 바로 사용 가능
• 공백 리스트를 사용하면 CSS 속성과 자연스럽게 연결됨.

$margin-values: 10px 20px 30px 40px;

.box {
  margin: $margin-values; // margin: 10px 20px 30px 40px;
}

---

리스트 함수

length()

• length() 함수는 리스트의 길이를 반환

/* [문법] */
length(리스트);

$my-list: a, b, c, d;
length($my-list); // 4 반환

---

nth()

• 리스트에서 특정 위치의 요소를 반환
• 인덱스는 1부터 시작.

/* [문법] */
nth(리스트, 위치)

$sizes: 10px 20px 30px;
$second-size: nth($sizes, 2); // 20px

---

append()

• 리스트 끝에 새로운 값을 추가
• 기본 구분자는 기존 리스트와 동일하게 유지되지만, 필요시 쉼표(,)나 공백으로 지정 가능.
• 구분자: 리스트를 구분할 방식
  • comma → 쉼표 리스트
  • space → 공백 리스트
  • auto → 기존 리스트 구분자를 따라감 (기본값)

/* [문법] */
append(리스트, 추가값, 구분자: auto)

$numbers: 1, 2;
$numbers: append($numbers, 3); // 1, 2, 3
$space-list: 10 20;
$space-list: append($space-list, 30, space); // 10 20 30 space 구분자로 지정

---

join()

• 두 리스트를 합쳐서 새로운 리스트를 만듦.
• 구분자: 리스트를 구분할 방식
  • comma → 쉼표 리스트
  • space → 공백 리스트
  • auto → 기존 리스트 구분자를 따라감 (기본값)

/* [문법] */
join(리스트1, 리스트2, 구분자: auto)

$list1: a, b;
$list2: c, d;
$merged: join($list1, $list2); // a, b, c, d

$space1: 10 20;
$space2: 30 40;
$merged-space: join($space1, $space2, space); // 10 20 30 40

---

index()

• 리스트 안에서 특정 값이 몇 번째 위치에 있는지 반환
• 값이 없으면 null.

/* [문법] */
index(리스트, 값)

$letters: a, b, c;
$pos: index($letters, b); // 2
$none: index($letters, d); // null

---

list.separator()

• 리스트의 구분자(, 또는 공백)를 확인할 때 사용.

/* [문법] */
separator(리스트)

$comma-list: a, b, c;
$space-list: a b c;
$list1-sep: separator($comma-list); // comma
$list2-sep: separator($space-list); // space

---

중첩 리스트

• 리스트 안에 또 다른 리스트를 넣으면 중첩 리스트가 됨.
• 중첩 리스트를 사용하면 다차원 배열처럼 데이터 구조를 관리할 수 있음.
• 예를 들어, 좌표나 테이블 데이터, 컬러 팔레트 등을 다룰 때 편리함
• 소괄호로 묶으면 내부 리스트를 하나의 요소로 인식함.
• 내부 리스트에 접근할 때는 nth() 함수를 중첩해서 사용해야 함.

/* [문법] */
$nested-list: (리스트1), (리스트2), (리스트3);

$nested: (10px, 20px), (30px, 40px), (50px, 60px);

// 첫 번째 내부 리스트 접근
$first-inner: nth($nested, 1); // (10px, 20px)

// 첫 번째 내부 리스트에서 첫 번째 값 접근
$first-value: nth(nth($nested, 1), 1); // 10px

// 두 번째 내부 리스트에서 두 번째 값 접근
$second-value: nth(nth($nested, 2), 2); // 40px


/* 
그리드 활용 예
- 행/열 크기를 리스트로 관리 가능
*/ 
$grid: (100px, 200px), (150px, 250px);

/*
 컬러 팔레트 활용 예
 - 이름과 실제 컬러 값을 한 쌍으로 관리
 */
 $palette: (red, #ff0000), (green, #00ff00), (blue, #0000ff);