SCSS @each 규칙을 통해 테마 목록 설정에 접근하기

개발
1

yml 파일의 리스트 설정에 @each SCSS 연산자를 사용해 접근하려고 하는데, 리스트 항목이 하나를 넘으면 작동하지 않습니다. 기본값이 ""이거나 리스트에 항목이 하나만 있는 경우에는 코드가 의도대로 작동하지만, 그 이상은 아닙니다.

settings.yml:

list_setting:
  type: list
  default: ""
  description: "a list setting"

scss:

@each $setting in $list_setting {
  some css formating code with each $setting here;
}

이건 꽤 직관적으로 작동할 것 같은데, 리스트에 항목을 하나 이상 추가하면 오류 없이 작동이 멈춥니다. :thinking:

코드 고수분들께 조언을 구할 수 있을까요?

2

무작위 추측:

직접 테스트는 하지 않았지만, 리스트 설정은 파이프 |로 구분되는 것 같습니다.

CSS에서 $setting 값이 something|something_else|etc와 같은 형태일 수도 있습니다. 확실하게 확인하려면 해당 값을 어떤 CSS 속성(또는 JS, 값은 동일해야 합니다)에 출력해 보세요. :thinking:

3

음, 방금 이걸 생각하다가 리스트 값을 스크립트로 분리해야 하는 건지 궁금해졌어. 여러 리스트 항목을 하나의 문자열로 처리하고 있는 것 같아. :thinking:

4

참고로 지난주에 이 문제를 해결했습니다. 문자열 구분자 SCSS 함수를 사용했거든요.

@function str-to-list($string, $separator, $startAt: 1) {
  $item: str-slice($string, $startAt);
  $list: ();
  $index: str-index($item, $separator);

  @if $index ==null {
    $list: ($item);
  }

  @else {
    $list: (str-slice($item, 1, $index - 1));
    $list: join($list, str-to-list($item, $separator, $startAt: $index + 1));
  }

  @return $list;
}

$list: str-to-list("#{$list_setting}", "|");

@each $setting in $list {
  some css formating code with each $setting here;
}

이 컴포넌트에서 사용하고 있습니다:

@Don 님에게 팁을 주셔서 감사합니다 :slight_smile:

5

:exploding_head:

시도해 봤는데 이게 존재하는지 몰랐어요. 정말 좋네요. :clap: