Variables inside scss liquid mixin

2
votes

While developing a theme in shopify, I have a repetitive code of including a background from SCSS. Now the SCSS is actually a liquid file so I am able to fetch images there. Here's my code:

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

I am including the mixin this way:

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

Now when it's loaded into the browser, the url(...) is empty and the background colour is set.

If I am not wrong, it should compile to CSS, and replace url({{ $image | asset_url }}) with url({{ 'rings.jpg' | asset_url }}). Why doesn't this code work? Is there a way to include mixin variable inside liquid tag?

2
sassshopifyliquid

2 Answers

2
votes

Your scss file must have .liquid after ex. customs.scss.liquid

use {{ 'customs.scss.css' | asset_url | stylesheet_tag }} to include

Similar answer to danielarend, Need to change from single quotation ' to double quotation ". rings.jpg is stored in assets folder.

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

However, recommend to not use sass. Shopify is deprecating sass

1
votes

the $image does not exist in liquid context. Maybe if you change a litte bit your code, it will run.

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