Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulp task to compile Shopify Liquid tags in SASS with Autoprefixer
var gulp = require('gulp');
var sass = require('gulp-sass');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
gulp.task('compilesass', function() {
// root SASS file (contains all your includes)
return gulp.src('./sass/style.scss')
// compile SASS to CSS
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
// add vendor prefixes
.pipe(autoprefixer())
// change the file name to be a liquid file
.pipe(concat('style.css.liquid'))
// remove the extra set of quotations used for escaping the liquid string
.pipe(replace('"{{', '{{'))
.pipe(replace('}}"', '}}'))
// save the file to the theme assets directory
.pipe(gulp.dest('./assets/'));
});
gulp.task('default', function() {
// watch all SASS (.scss) files
gulp.watch(['./sass/**/*.scss'], ['compilesass']);
});
.classname {
// note the extra set of double quotes
background-image: url(#{'"{{ \'awesome-hero-image.jpg\' | asset_url }}"'});
}
@joemottershaw

This comment has been minimized.

Copy link

joemottershaw commented Mar 1, 2019

I've recently been trying to figure out a nice solution for incorporating my own framework with Shopify and using the #{''} interpolation method has helped massively when compiling locally with the latest version of SASS while maintaining liquid variables. It got a bit tiresome pretty quickly writing all the quotes and hashtags etc out, so I wrote two helper functions that I thought you might find useful.

The first one is used for basic settings:

// Function...
@function shopify($setting) {
    @return unquote('"{{ settings.' + $setting + ' }}"');
}

// Example...
body {
    background-color: shopify('background_color');
}

// Compiles to...
body {
    background-color: {{ settings.background_color }};
}

The next is linking to asset files/images for background images etc:

// Function...
@function shopify_asset($file) {
    @return unquote('url(\'"{{ "' + $file + '" | asset_url }}"\') ');
}

// Example...
body {
    background-image: shopify_asset('image.png');
}

// Compiles to...
body {
    background-image: url('{{ "image.png" | asset_url }}');
}

I've only written and used them the last couple of days and haven't run into any compiling errors or anything but that doesn't mean they are flawless obviously, but it's a nice start. I haven't come up with a decent way to get liquid logic working/compiling in stylesheets yet which is disappointing I guess, but I never really find the need to use logic in my stylesheets anyway. I always prefer to just write 2 different classes and put the logic in the template to determine which class it applies to the element.

In a perfect world, Shopify would just allow us to choose which version of SASS we use to compile in their theme editor and this could all be avoided and we could all sleep at night...

@martincarvalho

This comment has been minimized.

Copy link

martincarvalho commented Sep 16, 2019

Hey @joemottershaw
Those functions seem to be exactly what I need since configuring Gulp has been a real pain.
I just tried to use it as exactly as you have but it's returning a bad URL (https://cdn.shopify.com/s/files/1/0254/4379/5053/t/3/assets/%22/cdn.shopify.com/s/files/1/0254/4379/5053/t/3/assets/urn.png?475%22), do you have any idea why?
Btw, did you come up with a better solution yet?
Thank you!

@martincarvalho

This comment has been minimized.

Copy link

martincarvalho commented Sep 16, 2019

I removed the the extra quotes right before the {{ and }} tags and it seems to be working fine now :)
Here's how it looks:
@function shopify_asset($file) { @return unquote('url(\'{{ "'+ $file + '" | asset_url }}\') '); }

Not sure if this is properly formatted, though. If someone comes up with a better solution I'd love to hear!

@jack-fdrv

This comment has been minimized.

Copy link

jack-fdrv commented Apr 17, 2020

What about %{ if... ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.