嵌套列表中的SASS索引_Sass_Compass Sass

嵌套列表中的SASS索引

sass

嵌套列表中的SASS索引,sass,compass-sass,Sass,Compass Sass,我试图通过第一个属性获取嵌套SASS列表中某个项的索引。但是我得到结果的唯一方法是在项目中包含这两个属性是可以使用本机SASS，还是需要mixin/函数？对我如何做到这一点有什么意见吗我得到的密码是： $icons : ( 'arrow--down--full' '\e806', /* '' */ 'cog' '\e805', /* '' */ 'info' '\e807', /* '' */ 'arrow--down' '\e800', /* '' */ 'ar

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

是可以使用本机SASS，还是需要mixin/函数？对我如何做到这一点有什么意见吗

我得到的密码是：

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

这听起来像是一个哈希表或查找表，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'

您可以制作两个不同的列表，然后通过类似的函数将它们关联起来，从而进一步推动这一点：

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

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

听起来您所说的是哈希表或查找表，而Sass目前没有。但是，您可以通过多种方式轻松解决这一问题。这里有一些例子