Why can't I use @each rule on a converted string?

[nolosb]

Hi Kitty! Thanks for publishing all that great content about sass and css! It's really helpful and a joy to read and look at!

I'm developing themes for Discourse, the forum software. There's an option to access backend variables and lists in sass, but the format needs some adjustments. I'm struggling why I can't use @each rules on the converted strings.

What I want to do is pretty basic:

$list: 2 "Description 2", 3 "Description 3";
@each $id, $description in $list  {
    [.. do sth with the deconstructed elements..]
 }

And that works just fine. However, as mentioned above I get the values from a string that I first have to split into a list. It looks like this:

$string: '2 "Description 2"|3 "Description 3"';
$list: str-split("#{$string}", '|');
@each $id, $description in $list  {
  [..but it doesn't deconstruct the list..]
}

I've tried different functions for splitting or converting the string. I'm debugging the variable and I get the same results as in the first snippet (type-of is a list, length is 2, ..) But I always get an error when trying to deconstruct the list: unterminated attribute selector for id

I'm a bit lost what I'm missing here. Thanks a lot if you have an advice!

[KittyGiraudel]

Hello and thank you very much for the kind words, I appreciate it. 👋

So the problem is that once you’ve split your initial $string on pipes (|), you get a list of 2 strings looking like this:

('2 "Description 2"', '3 "Description 3"')

The items from that list are not sublists—they’re strings. Respectively '2 "Description 2"' and '3 "Description 3"'. You’d need to break them down again into sublists, which can be difficult because you don’t have an obvious delimiter.

Ideally, you get your initial data as a list to begin with instead of as a string. Or if you need to use a string, maybe you could have more obvious delimiters. Like so for instance:

$string: '2; "Description 2" | 3; "Description 3"';

This way you can break on pipes to begin with in order to have individual items, and then you can break every item on semi-colons to have sublists.

I hope this helps. :)

[nolosb]

Oh great, that works. Thank you for the advice! So yes, I need to use a string, but I can have semi-colons as delimiter. So I generate a first list splitting on pipes. Then I iterate on that list generating a nested list by splitting on semi.colons.

What I had done before is just unquote the strings in the first list. I read that on one of your blog posts:

Sass isn’t very strict with variable types. Basically it means you can process a list quite like a string, or use list functions on a string single value. It is basically kind of a mess.

But on re-reading now, I guess it only applies to "string single value".

[KittyGiraudel]

Right, yes. :D