Shopify Theme with Compass and Sass

Question

Does anyone have a workflow for developing Shopify themes with Compass and Sass? I am really close, I just need to figure out how to not make Sass barf on the CSS liquid tags.

Here's what I've got:

• A sass/compass project in directory (ex:, "/newwebsite/)
• A subdirectory containing my Shopify theme ("/newwebsite/newwebsite-theme/")
• A Compass config.rb that points the css,_dir images_dir and javascripts_dir all to the them's assets folder ("/newwebsite/newwebsite-theme/assets/")
• Compass watch on
• shopify_theme gem also watch on, uploading theme files to shopify (https://github.com/Shopify/shopify_theme)
• EDIT Sass interpolations (see anser below)
• EDIT Compass callback to rename to .css.liquid

The problem: Compass barf's when you need to use Shopify's liquid templating tags, for example, a background image - example, background: url( "{{ "splash-1.jpg" | asset_url }}")

Does anyone know how to instruct Compass / Sass to spit out the liquid template tags as they are into the CSS? If I have that, then I have a solid workflow of editing Sass locally, and realizing the changes momentarily after on the shopify shop.

Thanks

EDIT: By using Hopper's answer below for the liquid tags in Sass, and renaming the Compass output .css file to .css.liquid, I now have an instantaneous workflow for designing a Shopify theme with Compass and Sass! Here is the code for the Compass callback that goes in the config.rb:

on_stylesheet_saved do |filename|
  s = filename + ".liquid"
  puts "copying to: " + s
  FileUtils.cp(filename, s)
  puts "removing: " + filename
end

Answer 1

I'm not familiar with Shopify or liquid tags, but I do know that in SASS you can use interpolations to output plain CSS as-is. For example, the SASS here:

.test {
    background: url( #{'{{ "splash-1.jpg" | asset_url }}'} )
}

Would be compiled to:

.test {
    background: url({{ "splash-1.jpg" | asset_url }}); }

Does that get you close to what you're looking for?

Answer 2

How do you keep Compass from barfing on liquid logic between properties? E.g. any time there's a liquid if statement I get errors, and using #{'...'} doesn't seem to help.

This is a test I can't get to work:

#container {
  width:884px;
  margin:0px auto;
  min-height:500px;
  position:relative;
  padding:0 40px;
  {% if settings.page_bg_transparent %}
    background:transparent;
  {% else %}
    background:{{ settings.page_bg_color }};
  {% endif %}
}

UPDATE weirdly, commenting liquid logic works:

#container {
  width:884px;
  margin:0px auto;
  min-height:500px;
  position:relative;
  padding:0 40px; 
  /* {% if settings.page_bg_transparent %} */
    background:transparent;
  /* {% else %} */
    background:#{'{{ settings.page_bg_color }}'}; 
  /* {% endif %} */
}

Answer 3

For asset url you can also use SCSS custom functions. Put this in your config.rb file

module Sass::Script::Functions
  def shopify_image_url(string)
    assert_type string, :String
    Sass::Script::String.new("url({{'#{string.value}' | asset_url}})")
  end
end

And then use it in your styles.scss like this

background: shopify_image_url('image.png');

Answer 4

I found it useful to remove the original output file after save so you don't have that extra, non liquid file floating in the assets dir.

on_stylesheet_saved do |filename|
  s = filename + ".liquid"
  puts "copying to: " + s
  FileUtils.cp(filename, s)
  puts "removing: " + filename
  FileUtils.remove_file(filename)
end

Answer 5

Building on hopper's answer, for anyone using autoprefixer to process sass output, you would need to add an additional pair of quotes because url( {{ ... }} ) causes autoprefixer's parser to choke.

Do this:

background: url( "#{'{{ "splash-1.jpg" | asset_url }}'}" )

Which becomes this in the *.css.liquid file :

background: url( '{{ "splash-1.jpg" | asset_url }}' )

Answer 6

If you wish to preserve the ".scss.liquid" extension for the new responsive checkout use:

on_stylesheet_saved do |filename|
  FileUtils.mv filename, "#{File.dirname(filename)}/#{File.basename(filename,'.*')}.scss.liquid"
end

It renames the files instead of copying and then removing.

Answer 7

I wrote an article describing the methods I used to get Compass and Sass working well with Shopify. This is the same approach of DOMUSNETWORK's answer. I go into a little more detail on file structure.

http://www.mealeydev.com/blog/shopify-and-sass/

Answer 8

This worked for me, partially - however I found that the Shopify Theme app a lot of times didn't want to upload my edited .css.liquid file, because apparently it didn't recognize that the file had been edited.

What solved it for me was to use the following code in my config.rb, instead of the code in the question above:

on_stylesheet_saved do |filename|
  move_to = filename + ".liquid"
  puts "Moving from #{filename} to #{move_to}"
  FileUtils.mv(filename, move_to)
end

Answer 9

Shameless plug...

I think @nick is on the right track.

scss is better when it's compiled before sending to Shopify.

For others who find this answer, I think Quickshot is the tool you are looking for.

You will still need to interpolate for asset urls, but quickshot will automatically recompile your scss and upload the result to shopify in one step. Which also gives you the ability to use @include in your scss files.

http://quickshot.io/

https://github.com/internalfx/quickshot