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选择器并填充属性，我使用的是list和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编译器将理解的变量。基本上，我希望foreach通过组合$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

组合字符串和变量值以访问现有变量

1 个答案: