A better way to do Sass with Shopify Themes

Feb 25, 2015 | Blog

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

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.

Recent Articles

Introducing Relatable

Keeping things organized within a Shopify store can be hard, so we built Relatable to help with that.

Why we use Cloud66 to launch Ruby on Rails apps

We use Cloud66 for deploy Ruby on Rails apps, and we love it.

5 Common Pitfalls when Developing a Shopify Theme

Learn some tips on developing Shopify themes and some pitfalls to avoid. Build Shopify themes that perform and are easy to update and edit.

How to create a Shopify email link from your theme navigation

Add an email link to your Shopify website from within your theme using your current link list in navigation.

How to flag Shopify products as "new" by date

Here's a quick way to mark a product as being new by the date it was added to your Shopify store.