search

Shopify / liquid

Liquid markup language. Safe, customer facing template language for flexible web apps.
https://shopify.github.io/liquid/
MIT License
11.07k stars 1.38k forks source link

Theme SCSS compilation throws error #868

Open chintankotadia opened 7 years ago

chintankotadia commented 7 years ago

I am getting syntax error on saving theme.scss.liquid file. Following are error details:

Line 118 — Liquid syntax error: Variable '{{ '#{$image}' was not properly terminated with regexp: /\}\}/

Mixin:

@mixin background-image($image) {
  background-image: url('{{ "#{$image}" | asset_url }}');
}

Usage:

.foo {
  @include background-image('foo.png');
}

Can anyone help me out what is missing over here?

salexzee commented 7 years ago

If $image contains 'foo.png', and your theme.scss.liquid file is in assets, is it necessary to wrap it as liquid output with the asset_url filter? Wouldn't it relatively pull that image from assets since theme.scss.liquid is already in there? I would think you could just do:

background-image: url($image);
chintankotadia commented 7 years ago

@salexzee : Thank you for following up. Yes, correct that is what I have used to solve this issue for time being but according to Shopify documentation and experts this is not a good practice.

We should be always be using asset_url for all the assets files within style sheet. You can get more reference from comment of @JamieS on Shopify forum.

Lets say in near future, if Shopify implements some folder structure or other thing for images and scss then it might break our style sheet.