str-split()

문자 값에서 분리 기호를 찾아 리스트를 반환하는 유틸리티 함수

용도

문자 안에 포함된 특정 분리 기호(예 콤마(,))를 찾아 각 아이템으로 구성된 리스트를 반환 받아야 할 때 사용합니다.

사용법

str-split() 함수에 변경할 문자, 찾을 분리 기호를 전달합니다.

str-split($string:string, $seperator:string) → list

@debug str-split(".img, .button", ","); // ".img" ".button" 반환

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$string	string	✔︎
$seperator	string		','

로직

str-split() 유틸리티는 다음의 로직에 의해 작성되었습니다.

@function str-split($string, $separator: ',') {
  $split-list: ();
  $index: str-index($string, $separator);

  @while $index != null {
    $item: str-slice($string, 1, $index - 1);
    $split-list: append($split-list, $item);
    $string: str-slice($string, $index + 1);
    $index: str-index($string, $separator);
  }

  @return append($split-list, $string);
}

1. 전달 받은 문자 값, 그리고 구분 기호를 확인 (전달 된 값이 없을 경우 기본 값으로 콤마 사용)

2. 결과 반환에 쓰일 빈 리스트 $split-list 생성

3. 전달 받은 문자 값에서 구분 기호가 있는지 확인 (없을 경우 $index 값은 null)

4. $index 값이 null 이 아닐 때까지 반복($while) 문 처리

5. 구분 기호가 있을 경우, 구분 기호 앞의 문자를 $item 변수에 설정

6. $split-list 리스트에 $item 문자 값 첨부

7. 구분 기호 뒤의 문자를 $string 변수에 재 할당

8. 5번 로직을 반복해 인덱스($index) 재 할당 (4번 로직 조건이 거짓일 때까지 반복)

9. 최종적으로 $split-list 리스트에 $string 변수(문자)를 첨부하여 반환

참고

유틸리티 함수 로직에 사용된 Sass 빌트인 모듈은 다음과 같습니다.

• @if / @else

• @while

• str-index()

• str-slice()

• append()