1

我正在尝试通过第一个属性获取嵌套 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');
4

2 回答 2

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

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

于 2013-09-27T17:04:45.890 回答
0

@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;
}
于 2013-09-29T11:57:04.560 回答