Shopify Theme with Compass and Sass

compass-sass, liquid, sass, shopify

Solution

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?

Problem

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 ```

Original source