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
}