sass - Shopify 中循环中的 Sass 变量串联

Question

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

$black:          "black_rgb(0,0,0)";
$honey-brown:        "honey-brown_rgb(144,122,106)";
$red:                "red_rgb(255,0,0)";

$paints: $black, $honey-brown, $red;

@each $color in $paints {

$colSplit:  str-index($color, _);
$colName:   str-slice($color, 1, $colSplit - 1);
$colVal:    str-slice($color, $colSplit + 1);

.paint-#{$colName}-paint {background-color: #{$colVal};}
}

但是 Shopify 抛出错误：

“.paint-str-slice”之后的无效 CSS：预期的选择器，在 9706 为“(”black_rgb(0,0...)

所以看起来变量连接.paint-#{$colName}-paint不能正常工作。

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

标签： sassshopify

Answer 1

尝试使用地图：

$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;}
}