• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

1,523  
목차
  1. SASS - List Functions (리스트 함수) 특징
  2. append() 함수 - 끝에 값 추가
  3. index() 함수 - 위치 색인번호
  4. is-bracketed() 함수 - 대괄호 포함 여부
  5. join() 함수 - 리스트 결합
  6. length() 함수 - 항목 개수
  7. list-separator() 함수 - 구분자명 반환
  8. nth() 함수 - 지정 순번 요소 반환
  9. set-nth() 함수 - 지정 순번 요소 설정
  10. zip() 함수 - 다차원 리스트로 변환

 

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

 

1.

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

 

2.

리스트는 변경 불가. 

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

 

3.

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


 

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

append() 함수 - 끝에 값 추가

 

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() 함수 - 위치 색인번호

 

index(list, value)

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

(예제)

index(a b c, b)

Result: 2

index(a b c, f)

Result: null

 


is-bracketed() 함수 - 대괄호 포함 여부

 

is-bracketed(list)

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

(예제)

is-bracketed([a b c])

Result: true

is-bracketed(a b c)

Result: false

 


join() 함수 - 리스트 결합

 

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() 함수 - 항목 개수

 

length(list)

리스트 항목개수 반환.

(예제)

length(a b c)

Result: 3

 


list-separator() 함수 - 구분자명 반환

 

list-separator(list)

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

(예제)

list-separator(a b c)

Result: "space"

list-separator(a, b, c)

Result: "comma"

 


nth() 함수 - 지정 순번 요소 반환

 

nth(list, n)

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

(예제)

nth(a b c, 3)

Result: c

 


set-nth() 함수 - 지정 순번 요소 설정

 

set-nth(list, n, value)

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

(예제)

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

Result: a x c

 


zip() 함수 - 다차원 리스트로 변환

 

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

 

 


분류 제목
basic SCSS - Home (입문)
basic SCSS - Intro (소개)・Comments (주석)
basic SCSS - Installation (설치)
basic SCSS - Variables (변수)
basic SCSS - Nesting (안긴 형태)
basic SCSS - @import (가져오기)
basic SCSS - @mixin (믹스인)・@include (인클루드)
basic SCSS - @extend (상속)
func SCSS - String Functions (문자열 함수) 종류
func SCSS - Numeric Functions (숫자 함수) 종류
func SCSS - List Functions (리스트 함수) 종류
func SCSS - Map Functions (맵 함수) 종류
func SCSS - Selector Functions (선택자 함수) 종류
func SCSS - Introspection Functions (내부검사 함수) 종류
func SCSS - Color Functions (색상/색깔 함수) 종류
목록
찾아주셔서 감사합니다. Since 2012