使用指南针和Sass购物主题

Question

有没有人有使用Compass和Sass开发Shopify主题的工作流程？我非常接近,我只需要弄清楚如何不在CSS液体标签上制作Sass barf.

这是我得到的:

• 目录中的sass/compass项目(例如:"/ newwebsite /)
• 包含我的Shopify主题的子目录("/ newwebsite/newwebsite-theme /")
• 一个Compass config.rb,它将css,_dir images_dir和javascripts_dir指向它们的资产文件夹("/ newwebsite/newwebsite-theme/assets /")
• 指南针观看
• shopify_theme gem也会观看,上传主题文件到shopify(https://github.com/Shopify/shopify_theme)
• EDIT Sass插值(见下面的anser)
• 编辑指南针回调以重命名为.css.liquid

问题:指南针barf当你需要使用Shopify的液体模板标签时,例如背景图片 - 例如,背景:url("{{"splash-1.jpg"| asset_url}}")

有谁知道如何指示Compass/Sass吐出液体模板标签,因为它们进入CSS？如果我有,那么我有一个可靠的工作流程,在本地编辑Sass,并在shopify商店之后立即实现更改.

谢谢

编辑:通过使用Hopper在Sass中的液体标签的答案,并将Compass输出.css文件重命名为.css.liquid,我现在有一个瞬间工作流程,用于设计Compass和Sass的Shopify主题!以下是config.rb中Compass回调的代码:

on_stylesheet_saved do |filename|
  s = filename + ".liquid"
  puts "copying to: " + s
  FileUtils.cp(filename, s)
  puts "removing: " + filename
end

Answer 1

我不熟悉Shopify或液体标签,但我知道在SASS中你可以使用插值来按原样输出纯CSS.例如,SASS在这里:

.test {
    background: url( #{'{{ "splash-1.jpg" | asset_url }}'} )
}

将编译为:

.test {
    background: url({{ "splash-1.jpg" | asset_url }}); }

这会让你接近你想要的东西吗？

Answer 2

你如何保持指南针不受物业之间液体逻辑的影响？例如,任何时候有液体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 %} */
}