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

听起来你正在谈论的是一个哈希或查找表，Sass目前没有。但是，您可以通过各种方式轻松解决此问题。以下是一些例子。

你可以用不同的方式构建你的列表：

$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' ... );

我用空格排列这些值只是为了让它们对我来说更清晰，这样它们看起来有点像实际的表格，但是有很多方法可以编写Sass列表，你可能更喜欢另一种。然后是关联它们的函数：

@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');

您可能希望在查找函数中添加更多逻辑以捕获错误，并且您还可以将其扩展为接受并返回列表而不是单个值，但这只是一个基本示例。 / p>

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

嵌套列表中的SASS索引

2 个答案: