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
Answers
the $image does not exist in liquid context. Maybe if you change a litte bit your code, it will run.
Your
scss
file must have.liquid
after ex.customs.scss.liquid
use
{{ 'customs.scss.css' | asset_url | stylesheet_tag }}
to includeSimilar answer to danielarend, Need to change from single quotation
'
to double quotation"
.rings.jpg
is stored inassets
folder.However, recommend to not use sass.
Shopify is deprecating sass