Bourbon/ Sass Workflow with Shopify

keeping things atomized and normal

I’ve been working on my own Shopify scaffold/ base theme and I wanted to be able to use Bourbon + Neat as the main structure. If you’re familiar with Shopify, then you know that you cannot use Sass with @import statements the way that you would want/ need to in Bourbon. I explored a couple different ways to get around this, including using Gulp Gulp-concat, which I’m successfully using in This atomized version of Timber. But I was looking for a little bit of a different approach.

This is a quick look at how I’m using CodeKit to compile my Sass in a typical workflow while still making use of liquid tags/ variables—specifically those from your shop settings. In order to take advantage of partial stylesheets and liquid markup, your Sass files need to be compiled to a single file. There are quite a few compilers and tools that can do this, but I have been quite happy with CodeKit for this particulat workflow. This only needs to be setup once and I’ve found this workflow to be quite smooth.

The process is quite simple if you’re familiar with working with Bourbon and CodeKit (or Sass in general). I’ve setup a typical global.scss file within a sass/ directory, which imports bourbon, neat, and a couple other sets.

//This imports everything 

//Imports the Bourbon/Base (built from bitters)/Neat
@import "bourbon/bourbon";
@import "base/base";
@import "neat/neat";

//shopify partials
@import "shop/*";

Since I’m using CodeKit, I’m able to take advantage of the "shop/*” import globbing which imports all the partial sheets within the shop directory; which I keep the styles for things like headers, footers, product loops, etc.

The tricky part

Once I have this set up, I need to make sure that any variables I want to use in liquid form that reference the theme settings e.g. {{settings.color_primary" }} get wrapped in Sass interpolation syntax, the final syntax you need is:
$sass-variable: #{' liquid variable here '}

This will allow CodeKit to compile the files without throwing errors, while maintaining the liquid syntax you need.


Next, all that is left is to output the file with a .css.liquid OR .scss.liquid extension to the theme assets/ directory from CodeKit.

CodeKit compile example

I’ve found using .css.liquid is more reliable than .scss.liquid on Shopify, and since the Sass is already interpreted, there isn’t much reason to leave it as .scss.liquid

If you have your project files setup with Shopify’s desktop theme editor, like I do, you can just edit the partials the way you normally would and CodeKit will compile them while they are automatically re-uploaded to your shop and you can see the changes (almost) immediately.