Sass Variable Concatenation In Loops In Shopify

- 1 answer

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.



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.