When trying to append to a list, list-append was also appending the function itself:
$working-hours-start: 9;
$working-hours-end: 17;
$hours-list: ();
@for $i from $working-hours-start through $working-hours-end {
@debug $i;
$hours-list: list.append($hours-list, $i);
}
@debug $hours-list;
@each $hour in $hours-list {
@debug $hour
}
Gives the output:
50 DEBUG: 10
50 DEBUG: 10
50 DEBUG: 11
50 DEBUG: 12
50 DEBUG: 13
50 DEBUG: 14
50 DEBUG: 15
50 DEBUG: 16
50 DEBUG: 17
55 DEBUG: list-append(list-append(list-append(list-append(list-append(list-append(list-append(list-append(list-append(, 9), 10), 11), 12), 13), 14), 15), 16), 17)
59 DEBUG: list-append(list-append(list-append(list-append(list-append(list-append(list-append(list-append(list-append(, 9), 10), 11), 12), 13), 14), 15), 16), 17)
Apologies if I have used the function wrong, it's hard to find documentation on the dash versions of these functions as things seem to have moved onto the dot notation. (However dot notation wouldn't compile for me) I also tried adding the separator argument but this did not help.
I don't think this is the desired behaviour as it ruins the list as it cannot be iterated on, shown by the 59 Debug which is the output from the @each loop.
I have solved this for now by just moving to the JS implementation (npm sass) where dot notation compiles fine and list.append works as expected.
Thanks!