w3.css
공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자.
목록 함수
목록 함수는 목록의 값에 액세스하고 목록을 결합하고 목록에 항목을 추가하는 데 사용된다.
Sass 목록은 불변하다(변경할 수 없다).
따라서 목록을 반환하는 목록 함수는 새 목록을 반환하고 원래 목록을 변경하지 않는다.
Sass 목록은 1부터 시작한다.
목록의 첫 번째 목록 항목은 인덱스 0이 아니라 1에 있다.
다음 표는 Sass의 모든 목록 함수를 나열한다.
| 기능 | 설명 | 예시 |
|---|---|---|
| append(목록, 값, [구분 기호]) | 목록 끝에 단일 값을 추가한다. 구분 기호는 자동, 쉼표 또는 공백일 수 있다. 자동이 기본값이다. | append((a b c), d) 결과: a b c d append((a b c), (d), comma) 결과: a, b, c, d |
| index(목록, 값) | 목록에서 값의 인덱스 위치를 반환한다. | index(a b c, b) 결과: 2 index(a b c, f) 결과: null |
| is-bracketed(목록) | 목록에 대괄호가 있는지 확인한다. | is-bracketed([a b c]) 결과: true is-bracketed(a b c) 결과: False |
| join(목록1, 목록2, [구분 기호, 괄호]) | 목록1의 끝에 목록2를 추가한다. 구분 기호는 자동, 쉼표 또는 공백일 수 있다. 자동이 기본값이다(첫 번째 목록의 구분 기호를 사용한다). 괄호는 자동, 참 또는 거짓일 수 있다. 자동이 기본값이다. | 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(목록) | 목록의 길이를 반환한다. | length(a b c) 결과: 3 |
| list-separator(목록) | 사용된 목록 구분 기호를 문자열로 반환한다. 공백 또는 쉼표일 수 있다. | list-separator(a b c) 결과: “space” list-separator(a, b, c) 결과: “comma” |
| nth(목록, n) | 목록에서 n번째 요소를 반환한다. | nth(a b c, 3) 결과: c |
| set-nth(목록, n, 값) | n번째 목록 요소를 지정된 값으로 설정한다. | set-nth(a b c, 2, x) 결과: a x c |
| zip(목록들) | 목록들을 하나의 다차원 목록으로 결합한다. | zip(1px 2px 3px, solid dashed dotted, red green blue) 결과: 1px solid red, 2px dashed green, 3px dotted blue |
참고
W3C School - Sass List Functions
Sass - Sass Basics
