[func] SASS - List Functions (리스트 함수) 종류

SASS - List Functions (리스트 함수) 특징

 

1.

리스트 값에 접근, 리스트 결합, 리스트에 항목 추가하는 데 사용.

 

2.

리스트는 변경 불가. 

따라서, 리스트 함수는 새 리스트를 생성해 반환.

 

3.

리스트 인덱스는 1부터 시작. (주의: 0 아님.)

append(list, value, [separator])

리스트 끝에 단일 값 추가.
seperator: 구분자. (가능값:  auto, comma, space). (기본값: auto)

(예제)

append((a b c), d)

Result: a b c d

append((a b c), (d), comma)

Result: a, b, c, d

 

---

index(list, value)

리스트에서 값의 색인 위치 반환.

(예제)

index(a b c, b)

Result: 2

index(a b c, f)

Result: null

 

---

is-bracketed(list)

리스트가 대괄호 포함하는지 체크.

(예제)

is-bracketed([a b c])

Result: true

is-bracketed(a b c)

Result: false

 

---

join(list1, list2, [separator, bracketed])

리스트1에 리스트2를 추가. 

separator

선택. 구분자.  (가능값: auto, comma, space). (기본값: auto. 리스트1에 있는 구분자 사용.)

bracketed

선택. 대괄호로 묶기. (가능값: auto, true, false). (기본값: auto)

 

(예제)

join(a b c, d e f)

Result: a b c d e f

join((a b c), (d e f), comma)

Result: a, b, c, d, e, f

join(a b c, d e f, $bracketed: true)

Result: [a b c d e f]

 

---

length(list)

리스트 항목개수 반환.

(예제)

length(a b c)

Result: 3

 

---

list-separator(list)

리스트에 사용된 구분자명을 문자열로 반환.
(가능 결과값: space, comma)

(예제)

list-separator(a b c)

Result: "space"

list-separator(a, b, c)

Result: "comma"

 

---

nth(list, n)

리스트의 n번째 요소 반환.

(예제)

nth(a b c, 3)

Result: c

 

---

set-nth(list, n, value)

리스트의 n번째 요소를 지정값으로 설정.

(예제)

set-nth(a b c, 2, x)

Result: a x c

 

---

zip(list1, list2, list3, ....)

각 리스트의 n번째 값끼리 결합해 1개의 다차원 리스트로 변환.

(예제)

zip(1px 2px 3px, solid dashed dotted, red green blue)

Result: 1px solid red, 2px dashed green, 3px dotted blue