Доступ к настройкам списка тем через правило SCSS @each

Разработка
1

Я пытаюсь получить доступ к настройке списка в YAML-файле с помощью оператора SCSS @each, но не могу заставить это работать для более чем одной записи в списке. Код работает как ожидалось с пустым значением по умолчанию "" или одним элементом в списке, но не для нескольких.

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

Предположения наугад:

Я не проверял это, но, думаю, настройки списка разделены символом |.

Возможно, что $setting в вашем CSS равен something|something_else|etc. Чтобы убедиться в этом, вы можете вывести значение в каком-либо CSS-атрибуте (или в JS — значение должно быть одинаковым). :thinking:

3

Да, я как раз об этом думал и wondering, нужно ли мне разбивать эти значения списка с помощью скрипта? Подозреваю, что система воспринимает несколько элементов списка как одну строку. :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 {
  код форматирования CSS с использованием каждой $setting здесь;
}

Использую это в следующих компонентах:

Спасибо @Don за подсказку :slight_smile:

5

:exploding_head:

Я пытался, но не мог понять, что это существует, это здорово. :clap: