Shopify主题与指南针和萨斯
有没有人有用Compass和Sass开发Shopify主题的工作流程？ 我非常接近，我只需要弄清楚如何不在CSS液体标签上制作Sass barf。
这是我得到的：
问题：当您需要使用Shopify的液体模板标签时，Compass barf的例如背景图像 - 例如背景：url（“{{”splash-1.jpg“| asset_url}}”）
有谁知道如何指示Compass / Sass将液态模板标签吐出到CSS中吗？ 如果我有这个，那么我有一个本地编辑Sass的可靠工作流程，并且在shopify商店后立即实现这些变化。
谢谢
编辑：通过在Sass中为液体标签使用Hopper的答案，以及将Compass输出.css文件重命名为.css.liquid，我现在有一个即时工作流程用于设计Shopify主题与Compass和Sass！ 以下是config.rb中的Compass回调代码：
on_stylesheet_saved do |filename|
s = filename + ".liquid"
puts "copying to: " + s
FileUtils.cp(filename, s)
puts "removing: " + filename
end
我不熟悉Shopify或液体标签，但我知道在SASS中，您可以使用插值来按原样输出纯CSS。 例如，SASS在这里：
.test {
background: url( #{'{{ "splash-1.jpg" | asset_url }}'} )
}
将被编译为：
.test {
background: url({{ "splash-1.jpg" | asset_url }}); }
这是否让你接近你正在寻找的东西？
你如何让Compass免受物业之间的液体逻辑的阻碍？ 例如，任何时候有一个液体if声明我得到的错误，并用#{'...'}似乎并没有帮助。
这是我无法工作的测试：
#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 %}
}
奇怪地更新 ，评论液体逻辑工作：
#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 %} */
}
对于资产网址，您还可以使用SCSS自定义功能。 把它放在你的config.rb文件中
module Sass::Script::Functions
def shopify_image_url(string)
assert_type string, :String
Sass::Script::String.new("url({{'#{string.value}' | asset_url}})")
end
end
然后在你的styles.scss中使用它
background: shopify_image_url('image.png');