Can you have an array inside a sass object value?

Question

I'm trying to have an array inside an object's value.

$background-things: (
    'a': ['100vh', 'transparent', 'column'],
    'higher': ['70vh', '#000', 'column'],
    'lower': ['30vh', '#fff', 'row'],
);

and then later call them like this:

@each $name, $value in $background-things {
    #background {
        &-#{$name}: {
            @include column($height:$value[0], $background-color:$value[1], $flex-direction:$value[2]);
        }
    }
}

This doesn't work. Is there any way to do this? On a side note, does the value $name work, because in the object's property I put '&-a'.

Answer 1

It is possible. @each part needs some modification:

1. &-#{$name}: should convert to &-#{$name}.
2. Access to list (array) items is possible with nth function; for example nth($value, 1).
3. lists indexes start from 1.
4. Also '100vh' doesn't need '.

More information about lists: https://sass-lang.com/documentation/modules/list

    @each $name, $value in $background-things {
        #background {
            &-#{$name} {
                @include column($height:nth($value, 1), $background-color:nth($value, 2), $flex-direction:nth($value, 3));
            }
        }
    }