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.
π₯TIP: all of your dev dependencies will be included in your project in a node_modules directory. This can get pretty hefty, so it is a good idea to include node_modules in your .gitignore file if you are tracking your project with git. If you don't have a .gitignore file in your theme yet you can make one in the root of the theme directory.
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.
π₯ TIP: We use --save-dev because the packages we are importing are all used for development and are not required for production. This flag means we can save them as dev dependencies.
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.
π₯TIP: we are going to be re-writing the styles.scss.liquid file that is standard in a base Shopify theme. It's a good idea to copy those styles into a new file (you could even create a partial and import it) so that you don't lose them when you start the gulp task.
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.
