Previously, we wrote a post on integrating Compass into your development work flow in order to use partials with liquid tags and compile them into your base styles.scss.liquid file. As Compass is no longer actively supported, we wanted to write an updated post using Gulp.

New to Gulp - No Problem

Gulp is a javascript task runner that helps with task automation. This is great, because it means every time you want to complete a task, like compiling your Sass partials on save, you can program gulp to do it automatically.

We are going to be using gulp to do a couple of different things:

  • Compile our scss
  • Autoprefix any properties that need it
  • Rename our compiled scss file to styles.scss.liquid
  • Allow for addition of Liquid tags in our partials

The Setup

To setup start by making a new file in the root of your theme named gulfile.js


-example-theme
--gulpfile.js

Inside your gulpfile.js start by requiring all of the dependencies (store each in a variable) like this:


var gulp = require('gulp');
var sass = require('gulp-sass');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');	

Great! Now it's time to actually bring all of these dependencies into your project. In your terminal navigate to the root directory of your theme and run the following:


$ npm init

Note: if you don't have npm installed you can get it here.

Go through the prompts to create the package.json file for the modules we are going to bring in.

Once you have finished the init steps it's time to install all the packages our gulp task will be using. To install a package you'll run the follwing in your terminal still in the root of your theme:


$ npm install gulp --save-dev

Repeat this step subbing out gulp for the name of each package we required in our gulp file earlier on.

Once you have installed all of the packages check out the new folder that has been added to the root of your theme, node_modules.

Now that you have all the dependencies imported, we'll create a gulp task that will compile our scss, add vendor prefixes, rename the compiled file, and interpret liquid tags. The final task will look like this:


gulp.task('sass', function() {
  //root scss file (import all your partials into here)
  return gulp.src('./sass/styles.scss')
      .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
      // add vendor prefixes
      .pipe(autoprefixer())
      // change the file name to be styles.scss.liquid file
      .pipe(rename('styles.scss.liquid'))
      // remove the extra set of quotations used for escaping the liquid string (we'll explain this in a sec)
      .pipe(replace('"{{', '{{'))
      .pipe(replace('}}"', '}}'))
      // save the file to the theme assets directory
      .pipe(gulp.dest('./assets/'));
});

Finally, let's create a default task that watches for changes in all the Sass files. It will look like this:


gulp.task('default', function() {
    // this assumes your sass is in a directory named sass
    gulp.watch(['./sass/**/*.scss'], ['sass']);
});

Bring it all together and your final gulpfile will look like this:


var gulp = require('gulp');
var sass = require('gulp-sass');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');

gulp.task('sass', function() {
    return gulp.src('./sass/styles.scss')
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(rename('styles.scss.liquid'))
        .pipe(replace('"{{', '{{'))
        .pipe(replace('}}"', '}}'))
        .pipe(gulp.dest('./assets/'));
});

gulp.task('default', function() {
    
    gulp.watch(['./sass/**/*.scss'], ['sass']);
});

Start Writing Sass πŸŽ‰

Now that you have your gulpfile all set up it's time to create some partials and start writing Sass.

In the base directory of your theme create a new sass directory and include a file named styles.scss


-example-theme
--sass
---styles.scss <-- import all your partials into here
---components
----_nav.scss

You can also create any partials you may want. In the exmaple above we created a components directory with a partial for navigation elements. Note, partials are named with a leading underscore.

Once you are ready to write scss run the following command in the root of your theme:


gulp

While running, the gulp task will watch for changes in your .scss files and compile them into your styles.scss.liquid file.

Liquid Tags

In order to write liquid tags in Sass we need to use the Sass built in method for escaping strings: #{'the_liquid_tag'}. For example, in order to use a variable from the store settings the code would look something like this:


body {
	background: #{'{{setting.bg_color}}'};
}

You might notice if you try this out and run your gulp task you will get a compilation error. The reason for this is the string interpolation works for the first step of your gulp task, compiling the sass, but breaks during the second step, running the autoprefixer. The output of the compiled Sass still needs to be escaped. To do this we add a set of double quotes around the liquid tag like this:


body {
	background:#{'"{{settings.hl_color}}"'};
}

And there you have it. You can now use Sass partials with liquid tags for your Shopify theme development.

Special thanks to Derek Morash for the super rad post with tips on using replace to deal with liquid tags in Sass.