Writing Sass for Shopify without fucking up your normal workflow.


If you’ve ever done any Shopify theme development, you know that you’re gonna be writing with Liquid. While Liquid is great for template files, it’s not exactly the most flexible solution for stylesheets. As the Liquid docs are very good at communicating, the css/scss @import function doesn’t work in .scss.liquid files.

This means that your single main.scss.liquid file must contain every CSS declaration you intend to apply to your theme, as well as any and all helpers (resets, mixins, variables) too. And even if the @import function did work, you would have to have every single one of your .scss.liquid files in the /assets/ folder of your theme, or else it won’t be uploaded to the Shopify CDN.


Ayy, lmao.

You win, Shopify. But luckily, your way isn’t the only way!


For my current Shopify project, I wanted to do things the way that I’m used to doing them on every other dev project I’ve worked on. Shopify theme dev can be a swift kick to the feels for other reasons than just the file structure headaches I mentioned above. So, if we can eliminate one frustration, why not?

If you’re writing Sass, you already know how to structure a Sass project. Now let’s do this in Shopify. I created a /stylesheets directory in the root directory of my Shopify theme with my usual Sass file structure ( /globals, /components, /pages, etc) inside. Whether you’re using the Shopify Theme Gem to watch your theme folder from the command line, or their Desktop Theme Editor GUI, this folder isn’t going to be uploaded because remember, Shopify wants all your styles in one file. That’s okay, because all you need to do is set whatever SCSS compiler (like CodeKit or Grunt) you are using to output your main.scss file with all of your imports to a main.scss.liquid file in the theme’s /assets/ folder.

yourtheme/stylesheets/main.scss → yourtheme/assets/main.scss.liquid

Easy, eh? Yeah, dude. Sooooo easy.


But what about assets?

dat asset

A benefit to writing everything in the .liquid format is the ability to use Shopify’s CDN asset URL’s without having to actually figure that shit out. That’s where these two little mixins come in handy. (github repo)

@mixin font-file($asset-font-name) {
src: url(‘ {{ “#{$asset-font-name}.eot” | asset_url }} ‘);
src: url(‘ {{ “#{$asset-font-name}.eot” | asset_url }} ?#iefix ‘) format(“embedded-opentype”),
url(‘ {{ “#{$asset-font-name}.woff” | asset_url }} ‘) format(“woff”),
url(‘ {{ “#{$asset-font-name}.ttf” | asset_url }} ‘) format(“truetype”),
url(‘ {{ “#{$asset-font-name}.svg” | asset_url }} ‘) format(“svg”);
}
@mixin background-file($asset-image-with-extension) {
background-image: url(‘ {{ “#{$asset-image-with-extension}” | asset_url }} ‘)
}

The first is used for linking to webfont files, if you’re putting them in the /assets/ folder. The second is used for background images. Obviously this can be changed to do whatever you want using Shopify’s liquid tags and interpolating the values you pass through your mixins.

Anyways – hope this helps. Thanks for reading, be well, and ✌.

Show your support

Clapping shows how much you appreciated Joseph Bergdoll’s story.