Databases
StackOverflow2013
Postsdbo
POShopify Theme with Compass and Sass
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShopify Theme with Compass and Sass
    text
    copied!<p>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. </p> <p>Here's what I've got:</p> <ul> <li>A sass/compass project in directory (ex:, "/newwebsite/)</li> <li>A subdirectory containing my Shopify theme ("/newwebsite/newwebsite-theme/")</li> <li>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/")</li> <li>Compass watch on</li> <li>shopify_theme gem also watch on, uploading theme files to shopify (https://github.com/Shopify/shopify_theme)</li> <li>EDIT Sass interpolations (see anser below)</li> <li>EDIT Compass callback to rename to .css.liquid</li> </ul> <p>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 }}")</p> <p>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.</p> <p>Thanks</p> <p>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:</p> <pre><code>on_stylesheet_saved do |filename| s = filename + ".liquid" puts "copying to: " + s FileUtils.cp(filename, s) puts "removing: " + filename end </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload