Accessing theme list settings via SCSS @each rule

dev
1

i’m trying to access a list setting in yml file with an @each SCSS operator but cannot get it to work for more than one list entry. the code works as expected with default “” or one item in list, but not for more.

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

this seems like it should be somewhat straightforward, but as soon as i add more than one entry to the list, it stops working but no errors. :thinking:

any suggestions from code gurus?

2

Random guesses:

I didn’t test it, but I think list settings are delimited by pipes |.

It might be possible that $setting in your CSS equals something|something_else|etc. You could output the value in some CSS attribute (or JS, the value should be the same) to be sure. :thinking:

2 Likes
3

yea i was just thinking about this and wondering if i have to split those list values out with some script? i suspect it is treating multiple list items as one string.:thinking:

4

btw solved this last week. used a string separator scss function

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

using it in these components here:

thanks to @Don for the tip :slight_smile:

4 Likes
5

:exploding_head:

I tried but couldn’t figure out this existed, that’s great. :clap:

2 Likes
6

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