A better way to do Sass with Shopify Themes

Update (October 2020): this is a fairly old article and although there’s some relevant information here, I’d suggest using either Gulp or Webpack in combination with LibSass instead.

Thanks for Sass Shopify, but I’ll use Compass instead.

I’ve recently undertaken a project to use the eCommerce platform Shopify. After switching from Magento, I’ve really come to appreciate how simple and powerful the platform is. One “out of the box” feature that comes with Shopify’s liquid templating is using Sass/SCSS. As Shopify’s backend takes care of parsing your .scss files, you don’t have to worry about compiling to .css extensions. Although this is a nice feature for small projects, it doesn’t give you any flexibility or organization with your Sass. Shopify is pretty opinionated when it comes to file structure, and since sub-folders don’t work within the assets folder, using the built-in Sass compiler simply isn’t good enough.

Instead, I use the ruby compiler Compass to do all the heavy lifting, and it allows pretty much endless features when compiling. If you’re not familiar with Compass, check out http://compass-style.org/ for more info. Basically, I simply create a folder outside the assets folder named sass and compile the files into .scss.liquid/.css.liquid files. Within the root of my theme, the directory structure would looking something like this:

|-- assets
|-- config
|-- layout
|-- snippets
|-- templates
|-- sass
    |-- styles.scss
    |-- base
        |-- _base.sass
        |-- _colors.sass
        |-- ...
    |-- layout
        ...
    |-- modules
        ...
    |-- views
        ...

Then, in styles.scss file, I include each file in the order I want them to be loaded. styles.scss

/* Normalize */
@import "base/normalize";

/* Variables*/
@import "base/colors";
@import "base/variables";

/* Mixins */
@import "bourbon/bourbon";
@import "layout/breakpoints";
@import "base/mixins";

/* Fonts */
@import "base/fonts";

/* Base */
@import "base/base";

/* Layout */
@import "layout/layout";
@import "layout/header";
@import "layout/footer";

/* Modules */
@import "modules/modules";
@import "modules/nav";
@import "modules/shopper";
...

/* Views */
@import "views/support-article";
...

Now that the structure is setup, how do we actually create files that are accessible within the asset folder? We use some Compass config to help us out. Note that files that begin with an underscore are partials and will not processed to the assets folder. So, any partial we include will compile into a single file that will be used in our theme. In this case, styles.sass  will compile to styles.css (in the assets folder) and be renamed to styles.scss.liquid, where it will be served to the client. Here’s an example of a Compass config file: config > compass.rb

css_dir = "assets"
sass_dir = "sass"
javascripts_dir = "js"
sourcemap = true
output_style = :compressed

# Saves css files as liquid
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    # Break up the path
    path = File.dirname(filename) + "/"
    file = File.basename(filename, ".*")
    extension = ".scss.liquid"

    # Move the file to new location
    FileUtils.mv filename, path + file + extension
  end
end

What’s happening here is that after Compass compiles the Sass and saves the css files, it will rename the file to an extension we want to use. You can use .css.liquid or .scss.liquid, but I’m using .scss since Shopify looks for that extension specifically on the checkout page.

What’s awesome about this

In short, this allows us to use the liquid templating in the Sass that we write, and we get a whole lot of flexibility in using Compass. Since the file is renamed to have a .liquid extension, we can do things like:

.header {
  background: url('{{ "awesome_background.jpg" | asset_url }}');
}
.logo {
  height: #{'{{ setttings.logo_size }}'}
}

A quick note on escaping liquid

One very important note I’d like to make is that if you use liquid without wrapping it in quotes, Compass will try and parse it as Sass/CSS and it will fail. The way to get around that is to quote it, then interpolate the value with #{}. Before I started on this, I felt like the organization wasn’t really there, but since using this technique, the project feels right at home.

Find this helpful? You might also like our apps:

• Customer Fields allows you to build custom registration forms and retrieve valuable data from customers at just the right time.
• Meteor Mega Menu offers a variety of beautiful dropdown menu templates which you can attach to your exisiting Shopify navigation, meaning your store could have a menu makeover in minutes.