你可以在 sass 对象值中包含一个数组吗？

Question

我正在尝试在对象的值中创建一个数组。

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

然后以后这样称呼他们：

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

这行不通。有什么办法吗？在旁注中，值 $name 是否有效，因为在对象的属性中我输入了 '&-a'.

Answer 1

有可能。 @each 部分需要修改：

&-#{$name}: 应转换为 &-#{$name}.
可以使用 nth 函数访问列表（数组）项目；例如 nth($value, 1).
列出索引从 1 开始。
另外'100vh'不需要'。

有关列表的更多信息：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));
            }
        }
    }

你可以在 sass 对象值中包含一个数组吗？

Can you have an array inside a sass object value?

css

sass