Code Shopify

UPDATE: Compass is no longer being supported. While this may still work for now, it might be better to start using Gulp to compile your Sass. We've written a blog post here

We're continuing with the idea of establishing a great development flow for Shopify. If you haven't already started using the Shopify Theme Gem (which allows you to code Shopify locally, with your prefered text editor), check out this post.

Sass and Compass

Now that you’re all set up to code Shopify you may be happy to know that you can write in scss and there’s a precompiler already built in! You may be sad to find out that Shopify only supports having 1 scss file (styles.scss) and that you can’t take advantage of breaking your code out into partials for organization. This is where compass comes in to save the day.

Compass

Compass allows us to set up our own directory for sass, then compile it all into 1 styles.css file. Once that’s done, we then rename the styles.css to styles.scss.liquid. Adding the .liquid to the end makes it compatible with Shopify’s liquid templating language and allows you to add shopify variables right into your sass! Compass runs on any computer that has ruby installed.

Installation

In your terminal enter the following commands
```
$ gem update --system
```
```
$ gem install compass
```
Then go into the root of your theme directory
```
$ cd example-theme
```

Run the following command in the root directory

$ compass install compass

or, for old sass

 $ compass install compass --syntax sass

Create Sass Directory

Create sass folder at root of project

 #file directory

-example-theme
   --assets
   --config
   --layout
   --sass   <---
   --snippets
   --templates

Add all your sass partials (note partials start with _ in the file name)

#sass directory

-sass
   --base
      ---_container.sass
      ---_grid.sass
      ---_make-adaptive.sass
   --modules
      ---_front-page.sass
      ---_top-nav.sass
   --styles.sass

You'll notice above there we've also created a styles.sass. Import all the partials into that file



@import 'base/container.sass'
@import 'base/grid.sass'
@import 'base/make-adaptive.sass'
@import 'modules/top_nav.sass'
@import 'modules/front_page.sass'

Create Config File

In the root of your theme file, you'll notice a config folder. Inside that directory create a new file called compass.rb

 #file directory

-example-theme
   --assets
   --config
      ---compass.rb
   --layout
   --sass
   --snippets
   --templates

Inside this compass.rb file copy and paste the following code:


css_dir = "assets"
sass_dir = "sass"
javascripts_dir = "js"
sourcemap = false
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

The above file takes the styles.sass file (that has all the partials imported into it) and compiles it into a style.css file, then converts that file into a style.scss.liquid file and puts it into the assets folder in the theme

We've now made it so that we can have whatever sass file structure we want, while also maintaining a single styles.scss.liquid file in the assets directory that Shopify wants

Usage

Then in the terminal, while still in the root of your theme, put the following command
```
$ compass watch
```
Now every time you save the sass files will be compiled and moved into styles.scss.liquid in the assets folder
Added Bonus: if there’s an error in your sass, it won’t be uploaded and you’ll get a (hopefully) detailed error message :)

Bonus !

Since the styles file in the assets folder has a .liquid file extension, you can use liquid tags right in your sass!

For example, we can add the base text color right in our styles


/* example-theme/sass/base/_container.sass */
   body
	:font-family sans-serif
	:line-height 1.5
	:letter-spacing 1.5px
	:color #{'{{ settings.color_body_text }}'}

Note: You will now have 2 terminal windows open, one with the theme watch running for the theme gem, and one with the compass watch running for the sass compiling

Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

Shopify Development Flow - SASS, Compass, and Liquid