scss 液体混合内的变量答案

【问题标题】：Variables inside scss liquid mixinscss 液体混合内的变量
【发布时间】：2021-07-15 17:58:48
【问题描述】：

在 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 变量？

【问题讨论】：

标签： sass shopify liquid

【解决方案1】：

$image 不存在于液体上下文中。也许如果你稍微改变一下你的代码，它就会运行。

   @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 }}') ;
  }
}

【讨论】：

【解决方案2】：

您的 scss 文件必须在 ex 之后有 .liquid。 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 is deprecating sass

【讨论】：