结合的字符串，并访问现有可变

Question

想象我有以下组中定义的变量的一个变量的值：

$sportmenu_1: #23765c; 
$sportmenu_3: #5e6b34; 
$sportmenu_4: #7d7e6c; 
$sportmenu_6: #786857; 
$sportmenu_8: #487a91; 

我也有包含“ID”或每个变量的最后一位数字作为一个列表：

$list: 1 3 4 6 8; 

我再想到$ sportmenu_变量名都的CSS选择器和填充性，我使用的列表和一个foreach如下：

@each $id in $list_id_sports { 

    #sportmenu_#{$id} { //this works fine 
    .menu-sport-item { 
     background-color: #{$sportmenu_}#{$id}; //here's the issue! 
    } 
    } 
} 

问题是，我找不到一种方法来组合字符串和foreach中的$ id，以生成Sass编译器将理解的变量。基本上，我希望通过结合$sportmenu_和值$id来创建一个新变量。不知道这是否可能。

我的解决方案不起作用，因为$sportmenu_不存在。我试过把字符串和$ id结合起来："$sportmenu_"#{$id}，但是这只是创建一个字符串，后面跟着$ id的值。

谢谢！

Answer 1

为什么你不能做这样的事情？使用地图

$list: (1: #23765c, 3: #5e6b34, 4: #7d7e6c, 6: #786857, 8: #487a91); 

//$id grabs your map index, and $val grabs your hex color values 
@each $id, $val in $list { 
    #sportmenu_#{$id} { 
    .menu-sport-item { 
     background-color: #{$val}; 
    } 
    } 
} 

您可以在SassMeister上试用。其输出：

#sportmenu_1 .menu-sport-item { 
    background-color: #23765c; 
} 

..... 

所有我做在这里无非是使用地图（种哈希），遍历，和打印颜色也会相应。

---

此外，你正在尝试将无法正常工作。您正试图插入两个变量并尝试在编译时创建一个动态变量名称。

#{$sportmenu_}#{$id}; //will throw undefined $sprotsmenu_ error