css - 你可以在 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 部分需要修改:

1. &-#{$name}: 应转换为 &-#{$name}。
2. 可以使用nth 函数访问列表(数组)项；例如 nth($value, 1)。
3. 列出索引从 1 开始。
4. 此外，'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));
            }
        }
    }