Sass 목록 함수

Sass 목록 함수

목록 함수는 목록의 값을 접근하고 목록을 조합하고 목록에 항목을 추가하는 데 사용됩니다.

Sass 목록은 불변합니다. 따라서 목록의 값을 반환하는 목록 함수는 새 목록을 반환하며, 원본 목록을 변경하지 않습니다.

Sass 목록은 1에서 기준입니다. 목록의 첫 번째 항목은 인덱스 1에 위치하며, 0이 아닙니다.

아래는 Sass에서 사용할 수 있는 모든 목록 함수를 나열했습니다:

함수 설명 & 예제
append(list, value, [separator])

단일 값을 목록의 끝에 추가합니다.
구분자는 auto, comma 또는 space가 될 수 있습니다. auto는 기본 값입니다.

예제:

append((a b c), d)

결과: a b c d

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

결과: a, b, c, d

index(list, value)

리스트에서 값을의 인덱스 위치를 반환합니다.

예제:

index(a b c, b)

결과: 2

index(a b c, f)

결과: null

is-bracketed(list)

리스트에 괄호가 있는지 확인합니다.

예제:

is-bracketed([a b c])

결과: true

is-bracketed(a b c)

결과: false

join(list1, list2, [separator, bracketed)

결과: list2 추가됩니다 list1 끝.
구분자는 auto, comma 또는 space가 될 수 있습니다.
auto는 기본 값입니다. (첫 번째 목록의 구분자를 사용합니다).
bracketed auto, true 또는 false가 될 수 있습니다. auto는 기본 값입니다.

예제:

join(a b c, d e f)

결과: a b c d e f

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

결과: a, b, c, d, e, f

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

결과: [a b c d e f]

length(list)

목록의 길이를 반환합니다.

예제:

length(a b c)

결과: 3

list-separator(list)

사용된 목록 구분자를 문자열 형태로 반환합니다. space 또는 comma일 수 있습니다.

예제:

list-separator(a b c)

결과: "space"

list-separator(a, b, c)

결과: "comma"

nth(list, n)

목록에서 n번째 요소를 반환합니다.

예제:

nth(a b c, 3)

결과: c

set-nth(list, n, value)

n번째 목록 요소를 지정된 값으로 설정합니다.

예제:

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

결과: a x c

zip(lists)

리스트를 단일 다차원 리스트로 조합합니다.

예제:

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

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