使用指南针和Sass来购物化主题

是否有人拥有使用Compass和Sass开发Shopify主题的工作流程？我真的很接近，我只需要弄清楚如何不让CSS液体标签上的Sass呕吐

以下是我得到的：

• 目录中的sass/compass项目（例如：，“/newwebsite/）
• 包含我的Shopify主题的子目录（“/newwebsite/newwebsite-theme/”）
• 一个Compass config.rb，它将css、_dirimages_dir和javascripts_dir全部指向它们的资产文件夹（“/newwebsite/newwebsite theme/assets/”）
• 罗盘
• shopify_theme gem也可以观看，将主题文件上传到shopify(https://github.com/Shopify/shopify_theme)
• 编辑Sass插值（请参见下面的anser）
• 编辑Compass回调以重命名为.css.liquid

问题是：当你需要使用Shopify的liquid模板标签时，Compass barf就出现了，例如，背景图像，背景：url（“{{”splash-1.jpg“|asset_url}}”）

有人知道如何指导Compass/Sass在将液态模板标记放入CSS时吐出它们吗？如果我有，那么我有一个可靠的工作流程，可以在本地编辑Sass，并在shopify shop上立即实现更改

谢谢

编辑： 通过在Sass中使用Hopper下面对liquid标签的回答，并将Compass output.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

---

我不熟悉Shopify或liquid标签，但我知道在SASS中，您可以按原样输出普通CSS。例如，这里的SASS：

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

将汇编为：

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

---

这能让你接近你想要的吗？

你如何防止指南针在属性之间的液体逻辑上作呕？例如，每当有液体

语句出现错误时，使用
{…}
似乎没有帮助

这是一个我无法工作的测试：

#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 %} */
}

对于资产url，您也可以使用。
把它放在config.rb文件中

然后在你的样式中使用它

background: shopify_image_url('image.png');

这在一定程度上对我起了作用——但是我发现Shopify主题应用程序很多时候都不想上传我编辑的.css.liquid文件，因为它显然不知道该文件已经编辑过

解决这个问题的方法是在我的config.rb中使用以下代码，而不是上面问题中的代码：

on_stylesheet_saved do |filename|
  move_to = filename + ".liquid"
  puts "Moving from #{filename} to #{move_to}"
  FileUtils.mv(filename, move_to)
end

我发现保存后删除原始输出文件很有用，这样您就不会在assets目录中浮动额外的非流动文件

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

基于hopper的回答，对于任何使用autoprefixer处理sass输出的人来说，都需要添加一对额外的引号，因为
url（{…}）
会导致autoprefixer的解析器阻塞

这样做：

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

它在
*.css.liquid
文件中变成：

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

如果希望保留“.scss.liquid”扩展名以供新的响应式签出使用：

on_stylesheet_saved do |filename|
  FileUtils.mv filename, "#{File.dirname(filename)}/#{File.basename(filename,'.*')}.scss.liquid"
end

它会重命名文件，而不是复制然后删除。
我写了一篇文章，描述了让Compass和Sass与Shopify配合使用的方法。这与DomunSetwork的答案相同。我将更详细地介绍文件结构

无耻的插头

我认为@nick的做法是正确的

SCS在发送到Shopify之前编译时更好

对于其他找到这个答案的人来说，我认为Quickshot是你正在寻找的工具

您仍然需要插入资源URL，但quickshot将自动重新编译您的SCS，并在一步中将结果上载到shopify。这也使您能够在SCS文件中使用
@include


我曾经尝试过这样做，但却一无所获。使用自定义的SASS扩展名，或者如果有指令告诉SASS编译器忽略并按原样输出，这可能是可行的，但我没有找到任何可行的方法。是的！我还使用了on_stylesheet_saved Compass回调将CSS文件重命名为.liquid。我现在有了一个instantaneous workflow Thank you hopper！我一直在寻找一种方法来实现这一点，这真的很有帮助！这正是我所寻找的。我正在与Gulp、Theme合作，我在SCSS文件下为内联if排序单引号时遇到了麻烦。谢谢！
on_stylesheet_saved do |filename|
  FileUtils.mv filename, "#{File.dirname(filename)}/#{File.basename(filename,'.*')}.scss.liquid"
end