Индекс SASS во вложенном списке

Question

Я пытаюсь получить индекс элемента во вложенном списке SASS - по первому свойству. Но единственный способ получить результат - включить оба свойства в элемент.

Is is doable with native SASS, или ему понадобится mixin/function? И любой вклад в то, как я это сделаю?

код я получил:

$icons : (
    'arrow--down--full' '\e806', /* '' */ 
    'cog' '\e805', /* '' */ 
    'info' '\e807', /* '' */ 
    'arrow--down' '\e800', /* '' */ 
    'arrow--left' '\e801', /* '' */ 
    'arrow--right' '\e802', /* '' */ 
    'arrow--up' '\e803', /* '' */ 
    'close' '\e804', /* '' */ 
    'search' '\e804', /* '' */ 
    'spin' '\e809' /* '' */ 
); 

И мой поиск

//Working 
index($icons, 'search' '\e804'); 

//Not working, but what i want to achieve 
index($icons, 'search'); 

Answer 1

Это похоже на то, что вы говорите о хэш или таблицы поиска, которые Сасс в настоящее время не имеют. Однако вы можете легко обойти это различными способами. Вот несколько примеров.

Вы можете структурировать свой список немного по-другому:

$icons : (
    'arrow--down--full', '\e806', /* '' */ 
    'cog', '\e805', /* '' */ 
    'info', '\e807', /* '' */ 
    ... 
); 

Я добавил запятую после каждого пункта. Теперь, чтобы посмотреть его вы бы написать функцию, как

@function lookup($list, $key) { 
    @return nth($list, ((index($list, $key)) + 1)); 
} 

И называть это как так

lookup($icons, 'cog'); // => '\e805' 

Вы можете нажать эту немного дальше, сделав 2 разных списков, а затем связать их через аналогичное функция:

$icon-keys: ('arrow--down--full', 'cog', 'info' ...); 
$icon-values: ('\e806',    '\e805', '\e807' ...); 

Я выстроил значение с пробелами только, чтобы сделать их более разборчивой мне так, что они кажутся немного как реальная таблица, но есть куча способов написания списков Сасс, d вы можете предпочесть другое. Тогда функция, которая связывает их:

@function lookup($lookup-key, $all-keys, $all-values) { 
    @return nth($all-values, index($all-keys, $lookup-key)); 
} 

И использовать его:

lookup('cog', $icon-keys, $icon-values); // => '\e805' 

На мой вкус, это и немного неуклюжим, поэтому я хотел бы сделать функцию быстрого доступа, чтобы сделать его немного более разборчивыми :

для первой вариации:

@function icons($lookup-key) { 
    @return lookup($icons, $lookup-key); 
} 

для второго:

@function icons($lookup-key, $types: $icon-keys, $values: $icon-values) { 
    @return lookup($lookup-key, $types, $values); 
} 

так что вы могли бы просто в любом случае вызов

icons('cog'); 

Вы, вероятно, хотите, чтобы положить немного больше логики в ваших функций поиска ошибки поймать, и вы могли бы также расширить его и принять и возвращает список, а не одно значение, но это всего лишь базовый пример.

Answer 2

@cimmanon ответил на это: https://stackoverflow.com/a/17004655/786123

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