Sass variable concatenation in loops in Shopify

问题:

My SCSS compiles fine on 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};}
}

However Shopify is throwing an error:

Invalid CSS after ".paint-str-slice": expected selector, was "("black_rgb(0,0..." at 9706

So it looks like the variable concatenation .paint-#{$colName}-paint isn't working properly.

I am not sure if it is to do with versions of software - I set Sassmeister to the lowest settings (v3.3.14) but it still works fine there. I do not know how to find out the version of scss Shopify uses.

回答1:

Try to use a map:

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

回答2:

It turns out that Shopify uses an old version of Sass which doesn't support some of the latest features such as @import for partials or indeed Maps1:

Note: Shopify is using a forked version of Sass v3.2 which does not support importing partial Sass files with the @import directive. This may cause some issues when trying to work with 3rd party Sass libraries.