Shopify主题使用Compass和Sass

Question

有人有用Compass和Sass开发Shopify主题的工作流吗？我已经很接近成功了，只需要解决如何让Sass不会因为CSS liquid标记而出错的问题。

以下是我的设置：

- 在目录（例如："/ newwebsite /"）中使用sass/compass项目。 - 包含我的Shopify主题的子目录（"/ newwebsite / newwebsite-theme /"）。 - Compass config.rb 将css_dir、images_dir和javascripts_dir都指向主题的资产文件夹（"/ newwebsite / newwebsite-theme / assets /"）。 - 启动了Compass watch。 - 启动了 shopify_theme gem，上传主题文件到 Shopify（https://github.com/Shopify/shopify_theme）。 - 编辑Sass插值（请参见下面的回答）。 - 编辑Compass回调以将输出重命名为.css.liquid。

问题在于，当您需要使用Shopify的Liquid模板标记时，例如背景图像 - 例如，background：url（“{{“ splash-1.jpg”| asset_url}}”）时，Compass就会出错。

有人知道如何指示Compass / Sass将liquid模板标记直接输出到CSS中吗？如果我有这个，那么我就可以在本地编辑Sass，并即刻看到更改后的效果。

谢谢！

编辑： 使用Hopper下面关于在Sass中使用liquid标记的答案，并将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

- wart

---

我曾经试图做到这一点，但没有任何进展。可能需要使用自定义的SASS扩展，或者如果有一个指令告诉SASS编译器忽略并输出原样，但我没有找到任何可行的方法。 - John Duff

Answer 1

我不熟悉Shopify或liquid标签，但我知道在SASS中你可以使用插值将纯CSS按原样输出。例如，这里的SASS：

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

将被编译为：

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

这是否接近于你所寻找的内容？

- hopper

---

是的！我也使用了 on_stylesheet_saved Compass 回调函数来将 CSS 文件重命名为 .liquid。现在我的工作流程非常快速。谢谢 Hopper！ - wart

我已经寻找了很长时间的方法来实现这个 +1 - chrixian

Answer 2

如何避免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 %}
}

更新奇怪的是，注释掉Liquid逻辑可以解决问题：

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

- rda3000

---

这正是我一直在寻找的。我正在使用Gulp、Theme，但在我的SCSS文件中进行内联if时遇到了单引号排序的问题。谢谢！ - Miguel Garrido

Answer 3

对于资源URL，您也可以使用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');

- Vitaliy Z

Answer 4

如果您希望保留新响应式结账的“.scss.liquid”扩展名，请使用：

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

它重命名文件而不是复制和删除。

- Ilia luk

Answer 5

我发现在保存后删除原始输出文件很有用，这样你就不会在资产目录中浮动那个额外的非 Liquid 文件。

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

- Rodrigo Garcia Najera

Answer 6

在 hopper 的回答基础上，如果有人使用 autoprefixer 处理 sass 输出，你需要添加一对额外的引号，因为 url( {{ ... }} ) 会导致 autoprefixer 的解析器出现问题。

做这个：

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

这在 *.css.liquid 文件中变成了这样：

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

- CheapSteaks

Answer 7

我写了一篇文章，描述了我使用的方法，使得Compass和Sass与Shopify良好地配合。这与DOMUSNETWORK的答案采用相同的方法。我在文件结构方面进行了更详细的说明。

http://www.mealeydev.com/blog/shopify-and-sass/

- nick

Answer 8

这对我有所帮助，但是我发现 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

- Rinocerontes

Answer 9

不要介意我自己推销一下...

我认为@nick说得对。

在发送到Shopify之前编译scss会更好。

对于其他找到这个答案的人，我认为Quickshot是你要找的工具。

你仍然需要插值asset urls，但quickshot将自动重新编译你的scss并将结果上传到shopify中，只需一步即可。这也使您能够在scss文件中使用@include。

http://quickshot.io/

https://github.com/internalfx/quickshot

- InternalFX