时间戳

首页 > 解决方案 > scss 液体混合中的变量

sass - scss 液体混合中的变量

问题描述

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

我以这种方式包括mixin：

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

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

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

标签： sassshopifyliquid

解决方案

您的scss文件必须.liquid在 ex 之后。customs.scss.liquid

用于{{ 'customs.scss.css' | asset_url | stylesheet_tag }}包括

与 danielarend 类似的答案，需要从单引号更改'为双引号"。 rings.jpg存储在assets文件夹中。

  @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

推荐阅读