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?