Accessing theme list settings via SCSS @each rule

Development

AI-generated summary

The discussion Accessing theme list settings via SCSS @each rule revolves around accessing a list setting in a YML file using an SCSS @each operator. Lilly initially faced issues when trying to access the list setting with multiple entries, as it would work with default or single-item lists but not with multiple items. Canapin suggested that list settings might be delimited by pipes |, which could be causing the issue.

Lilly suspected that the multiple list items were being treated as a single string and considered using a script to split the values. However, Lilly later posted a solution using a string separator SCSS function, str-to-list, to split the list string into individual items. The function is used as follows:

$list: str-to-list("#{$list_setting}", "|");
@each $setting in $list {
  some css formating code with each $setting here;
}

This solution is utilized in Lilly’s components, such as topic-header-changer and restrict-user-status, with credit given to @Don for the tip. Canapin expressed admiration for the solution, having previously been unaware of its existence.

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:

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:

https://github.com/Lillinator/topic-header-changer

https://github.com/Lillinator/restrict-user-status

thanks to @Don for the tip :slight_smile:

5

:exploding_head:

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