Skip to content

Adam Bohannon

GithubLinkedIn

Shopify Development: Using Liquid syntax in Sass and compiling with Gulp

Sass, Liquid, Shopify, Gulp1 min read

Recently a friend was having trouble developing a custom Shopify theme, specifically getting Sass to compile when the Sass file contains Liquid variables. After helping him get unstuck (and after reading numerous articles and Stack Overflow posts) I thought I'd distill what we learned, especially because we didn't find anything that clearly described how to use Liquid statements in Sass.

Using Sass interpolation you can easily add Liquid variables.

sass/main.scss
1h1 {
2 color: #{'"{{ header_color }}"'};
3}

To add Liquid expressions, add them inside comments. (Note: This relies on a particular Gulp setting, described below in Gulp Setup)

sass/main.scss
1/* {% assign header_color = '#7ab55c' %} */
2h1 {
3 color: #{'"{{ header_color }}"'};
4}

Using Gulp, this will compile to the following (Liquid ignores CSS/Sass comment syntax).

assets/theme.scss.Liquid
1/* {% assign header_color = '#7ab55c' %} */
2h1 {
3 color: {{ header_color }};
4}

Here's another example using Sass variables.

sass/main.scss
1$primary-color-brighter: calc(#{'"{{ "#7ab55c" | color_brightness }}"'} / 100);
2
3p {
4 color: $primary-color-brighter;
5}

Gulp Setup

To setup Gulp to properly compile your Sass with Liquid variables and expressions, run the following commands to install the necessary packages first.

1npm init
2npm install gulp gulp-autoprefixer gulp-rename gulp-replace gulp-sass

gulp-autoprefixer to add vendor prefixes to your CSS

gulp-sass to compile your .scss file to CSS

gulp-rename to easily rename your .scss file to a .liquid file

gulp-replace to replace strings in your sass

Next create a file called gulpfile.js in the root of your project. In this file is where you will setup the plumbing to process your Sass file.

gulpfile.js
1var gulp = require("gulp");
2var sass = require("gulp-sass");
3var replace = require("gulp-replace");
4var autoprefixer = require("gulp-autoprefixer");
5var rename = require("gulp-rename");
6
7gulp.task("sass", function () {
8 return (
9 gulp
10 // the directory where your Sass files lives
11 .src("./sass/main.scss")
12 .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError))
13 // to add vendoer prefixes
14 .pipe(autoprefixer())
15 // rename our output to a .liquid file
16 .pipe(rename("theme.scss.liquid"))
17 // to get rid of the double quotes inside the single quotes
18 .pipe(replace('"{{', "{{"))
19 .pipe(replace('}}"', "}}"))
20 // determines our output directory
21 .pipe(gulp.dest("./assets/"))
22 );
23});
24
25gulp.task("default", function () {
26 gulp.watch(["./sass/**/*.scss"], gulp.series(["sass"]));
27});

This entire file is important, but one particular line I want to point out is line 11. Make sure the outputStyle is set to something other than compressed, otherwise your Sass comments will be stripped from the compiled code and your Liquid variables won't work.

You can find the available options for gulp-sass here.

Now, to compile your Sass on the fly, just run gulp. As you make changes, you should see the compiled code outputted to /assets/theme.scss.liquid. Any errors will be logged to the console with a description and line number.

Bonus: if you want to avoid the CSS comment syntax from ending up in your .liquid file, you can chain these two .replace methods to your existing Gulp config.

1.pipe(replace('/*', ""))
2.pipe(replace('*/', ""))