Shopify Theme with Compass and Sass

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

---

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?

---

How do you keep Compass from barfing on liquid logic between properties? Eg 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 %} */
}

---

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');

链接地址: http://www.djcxy.com/p/91664.html

上一篇: 在罗盘config.rb中指定一个单独的scss文件

下一篇: Shopify主题与指南针和萨斯