댓글 목록

Sass List 함수

페이지 정보

작성자 운영자 작성일 19-06-04 11:38 조회 1,276 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

Sass List 함수 


목록 함수는 목록의 값에 액세스하고 목록을 결합하며 목록에 항목을 추가하는 데 사용됩니다.


Sass 목록은 변경할 수 없습니다 (변경할 수 없음). 따라서 목록을 반환하는 목록 함수는 새 목록을 반환하고 원래 목록은 변경하지 않습니다.


목록은 1 기반입니다. 목록의 첫 번째 목록 항목은 0이 아닌 인덱스 1에 있습니다.


다음 표에서는 Sass의 모든 목록 기능을 나열합니다.

 Function

 Description & Example

 append(list, value, [separator])

목록의 끝에 단일 값을 추가합니다. 구분 기호는 자동, 쉼표 또는 공백 일 수 있습니다. 자동이 기본값입니다.


예:

append((a b c), d)

결과 : a b c d

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

결과 : a, b, c, d 

 index(list, value)

list 내의 값의 인덱스 위치를 돌려줍니다.


예:

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])

list1의 끝에 list2를 추가합니다. 구분 기호는 자동, 쉼표 또는 공백 일 수 있습니다. 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)

사용 된 목록 구분 기호를 문자열로 반환합니다. 공백이나 쉼표가 될 수 있습니다.


예:

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 




댓글목록 0

등록된 댓글이 없습니다.