Shopify中循环中的Sass变量串联

我的SCSS在sassmeister上编译得很好：

但是Shopify抛出了一个错误：

“.paint str slice”之后的CSS无效：应为选择器，为 “（“黑色”rgb（0,0…”第9706页

因此，看起来变量concatenation

.paint-#{$colName}-paint

工作不正常

我不确定这是否与软件版本有关-我将SassMister设置为最低设置（v3.3.14），但在那里它仍然可以正常工作。我不知道如何找到scss Shopify使用的版本。

尝试使用地图：

$paints:(
  black:         rgb(0,0,0),
  honey-brown:   rgb(144,122,106),
  red:           rgb(255,0,0)
);

@each $name, $color in $paints {
  .paint-#{$name}-paint {background-color: $color;}
}

尝试使用地图：

$paints:(
  black:         rgb(0,0,0),
  honey-brown:   rgb(144,122,106),
  red:           rgb(255,0,0)
);

@each $name, $color in $paints {
  .paint-#{$name}-paint {background-color: $color;}
}

---

事实证明，Shopify使用的是旧版本的Sass，它不支持某些最新功能，如@import for partials或Maps：

注意：Shopify使用的是Sass v3.2的分叉版本，该版本不支持使用@import指令导入部分Sass文件。在尝试使用第三方Sass库时，这可能会导致一些问题

---

事实证明，Shopify使用的是旧版本的Sass，它不支持某些最新功能，如@import for partials或Maps：

注意：Shopify使用的是Sass v3.2的分叉版本，该版本不支持使用@import指令导入部分Sass文件。在尝试使用第三方Sass库时，这可能会导致一些问题

---

谢谢，我不知道地图是一种更干净的方法，我学到了一些东西，但是我仍然得到了一个错误：

黑色后的无效CSS:expected”）“，was”：rgb（0,0,0）”

mmmh…使用十六进制而不使用rgb（）？000000，#ff0000…改变一些东西？谢谢你，我不知道地图是一种更干净的方法，我学到了一些东西，但是我仍然得到一个错误：

黑色后无效CSS:expected”）”，was“：rgb（0,0,0）”

mmmh…使用十六进制而不使用rgb（）？#000000，#ff0000…改变一些东西吗？