Доступ 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 
}