Shopify Question posted in
The Shopify help center can be found here.

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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;}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search