嵌套列表中的SASS索引

Question

我试图通过第一个属性获取嵌套SASS列表中的项索引。但我能得到结果的唯一方法是在项目中包含两个属性。

是否可以与本地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' ...); 

我已经排队与空白的价值只有让他们更清晰给我，让它们看起来有点像一个实际的表，但也有吨的写作萨斯名单的方式，一你可能更喜欢另一个。然后，该功能是它们相关联：

@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; 
}