Shopify中循环中的Sass变量串联 [英] Sass variable concatenation in loops in Shopify

问题描述

我的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引发错误：

".aint-str-Slice"后的CSS无效：应为选择器，为 "("BLACK_RGB(0，0."，位于9706)

因此，看起来变量串联.paint-#{$colName}-paint工作不正常。

我不确定是否与软件版本有关-我将Sassmeister设置为最低设置(v3.3.14)，但它在那里仍然工作得很好。我不知道如何查找SCSS Shopify使用的版本。

推荐答案

原来Shopify使用的是旧版本的Sass，该版本不支持某些最新功能，如@IMPORT for Partials或Even Map1：

注意：Shopify使用的是Sass V3.2的派生版本，该版本不支持使用@import指令导入部分Sass文件。在尝试使用第三方Sass库时，这可能会导致一些问题。

这篇关于Shopify中循环中的Sass变量串联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！