# Accessing theme list settings via SCSS @each rule

**URL:** https://meta.discourse.org/t/accessing-theme-list-settings-via-scss-each-rule/272142
**Category:** Development
**Created:** [July 19, 2023, 3:27pm UTC](https://meta.discourse.org/t/accessing-theme-list-settings-via-scss-each-rule/272142 "2023-07-19T15:27:42Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [July 19, 2023, 3:27pm UTC](https://meta.discourse.org/t/accessing-theme-list-settings-via-scss-each-rule/272142/1 "2023-07-19T15:27:42Z")

</div>

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:

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

```

scss:

```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. 🤔

any suggestions from code gurus?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [July 19, 2023, 3:44pm UTC](https://meta.discourse.org/t/accessing-theme-list-settings-via-scss-each-rule/272142/2 "2023-07-19T15:44:04Z")

</div>

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. 🤔

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [July 19, 2023, 3:46pm UTC](https://meta.discourse.org/t/accessing-theme-list-settings-via-scss-each-rule/272142/3 "2023-07-19T15:46:15Z")

</div>

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.🤔

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [July 31, 2023, 1:43am UTC](https://meta.discourse.org/t/accessing-theme-list-settings-via-scss-each-rule/272142/4 "2023-07-31T01:43:37Z")

</div>

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

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

```

using it in these components here:

[https://github.com/Lillinator/topic-header-changer](https://github.com/Lillinator/topic-header-changer)

[https://github.com/Lillinator/restrict-user-status](https://github.com/Lillinator/restrict-user-status)

thanks to @Don for the tip 🙂

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [July 31, 2023, 11:38am UTC](https://meta.discourse.org/t/accessing-theme-list-settings-via-scss-each-rule/272142/5 "2023-07-31T11:38:49Z")

</div>

> [@Lilly](#):
>
> ```scss
> $list: str-to-list("#{$list_setting}", "|");
> 
> ```

🤯

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

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [August 30, 2023, 11:39am UTC](https://meta.discourse.org/t/accessing-theme-list-settings-via-scss-each-rule/272142/6 "2023-08-30T11:39:48Z")

</div>

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