css - 访问 SASS 多维列表键

Question

我有一个多维列表：

$color-set: (bg-color #888, border-color #444, active-bg-color #666, hover-bg-color #808080)

目前我使用以下方法访问每个：

$color-set: (#888, #444, #666, #808080)
#div {
   background: nth($color-set, 1)
}

有没有办法使用密钥代替：

#div {
   background: $color-set(bg-color)
}

所以我不必记住列表中颜色的顺序？

Answer 1

您所拥有的只是一个列表列表，而列表只有数字索引。您必须编写一个函数来遍历您的列表并将第一个元素与某个字符串参数进行比较。这不是我推荐的，因为它比仅使用普通变量没有任何好处。

@function find-value($list, $key) {
    @each $item in $list {
        @if ($key == nth($item, 1)) {
            @return nth($item, 2);
        }
    }
    @return false;
}

Sass 目前不支持映射，但很快就会支持：https ://github.com/nex3/sass/issues/642

Answer 2

只是为每种颜色使用一个单独的变量？

$bg-color: #888;
$border-color #444;

div {
   background: $bg-color
}