Shopify Question posted in
The Shopify help center can be found here.

Variables inside scss liquid mixin – Shopify

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?

Tags:

2

Answers


  1. 0

    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 }}') ;
  }
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search