SCSSの@eachルールを介してテーマリスト設定にアクセスする

開発
1

YAML ファイル内のリスト設定に @each SCSS 演算子でアクセスしようとしていますが、リストの 1 つのエントリしか機能しません。コードは、デフォルトの "" またはリストに 1 つの項目がある場合は期待どおりに機能しますが、それ以上の場合には機能しません。

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;
}

これは比較的単純なはずですが、リストに 2 つ以上のエントリを追加すると、エラーは発生しませんが、機能しなくなります。:thinking:

コードの達人からの提案はありますか？

2

推測：

テストはしていませんが、リストの設定はパイプ | で区切られていると思います。

CSS の $setting が something|something_else|etc に等しい可能性があります。確実にするために、CSS 属性（または JS、値は同じはずです）に出力して確認できます。:thinking:

「いいね！」 2
3

はい、私もまさにそれを考えていました。スクリプトでこれらのリスト値を分割する必要があるかどうか疑問に思っていました。複数のリスト項目が 1 つの文字列として扱われているのではないかと疑っています。: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 {
  ここに各$settingを使用した一部のCSSフォーマットコード。
}

これらのコンポーネントで使用しています。

@Don、ヒントをありがとう :slight_smile:

「いいね！」 5
5

:exploding_head:

これがあるとは知りませんでした。素晴らしいです。 :clap:

「いいね！」 2
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.