Конкатенация переменных Sass в циклах в Shopify

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 выдает ошибку:

Неверный CSS после ".paint-str-slice ": ожидаемый селектор, был" ("black_rgb (0,0 ..." при 9706

Таким образом, похоже, что конкатенация переменных .paint-#{$colName}-paint не работает должным образом.

Я не уверен, что это связано с версиями программного обеспечения - я установил Sassmeister на самые низкие настройки (v3.3.14), но он все еще работает там хорошо. Я не знаю, как узнать версию scss, которую использует Shopify.

Answer 1

Оказывается, что Shopify использует старую версию Sass, которая не поддерживает некоторые из последних функций, таких как @import для партиалов или даже Maps 1 :

Примечание. Shopify использует разветвленную версию Sass v3.2, которая не поддерживает импорт частичных файлов Sass с помощью директивы @import.Это может вызвать некоторые проблемы при работе со сторонними библиотеками Sass.

Answer 2

Попробуйте использовать карту:

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