scs液体混合物中的变量

Question

在shopify中开发主题时，我有一个包含SCSS背景的重复代码。现在SCSS实际上是一个液体文件，所以我可以在那里获取图像。这是我的代码：

@mixin background-cover($image) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
background-size: cover !important;
background: #B3AA9C no-repeat url({{ $image | asset_url }}) center;
}

我以这种方式包含混音：

.rings {
height: 30rem;
& .background {
@include background-cover('rings.jpg') ;
}
}

现在，当它加载到浏览器中时，url(...)为空，并且背景颜色已设置。

如果我没有错的话，它应该编译成CSS，并用url({{ 'rings.jpg' | asset_url }})替换url({{ $image | asset_url }})。为什么这个代码不起作用？有没有办法将mixin变量包含在液体标签中？

Answer 1

您的scss文件必须在前customs.scss.liquid之后有.liquid

使用{{ 'customs.scss.css' | asset_url | stylesheet_tag }}包含

与danielrend的答案类似，需要从单引号'更改为双引号"。CCD_ 10存储在CCD_。

@mixin background-cover($image) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
background-size: cover !important;
background: #B3AA9C no-repeat url($image) center;
}
.rings {
height: 30rem;
& .background {
@include background-cover("{{ 'rings.jpg' | asset_url }}") ;
}
}

但是，建议不要使用sass。Shopify正在抨击sass

Answer 2

$image在liquid上下文中不存在。也许如果你稍微修改一下代码，它就会运行。

@mixin background-cover($image) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
background-size: cover !important;
background: #B3AA9C no-repeat url($image) center;
}

---

.rings {
height: 30rem;
& .background {
@include background-cover('{{ 'rings.jpg' | asset_url }}') ;
}
}