Question

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

这就是我所拥有的：

目录中的sass / compass项目（例如：“/ newwebsite /）
包含我的Shopify主题的子目录（“/ newwebsite / newwebsite-theme /”）
指南针config.rb，它将css，_dir images_dir和javascripts_dir指向他们的资产文件夹（“/ newwebsite / newwebsite-theme / assets /”）
指南针观看
shopify_theme gem也会观看，上传主题文件到shopify（https://github.com/Shopify/shopify_theme）
编辑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中您可以使用interpolations按原样输出纯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 %} */
}

Answer 3

对于资产网址，您还可以使用SCSS custom functions。将它放在 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');

Answer 4

我发现在保存后删除原始输出文件很有用，因此您没有在资产目录中浮动的额外的非流动文件。

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

Answer 5

基于漏斗的答案，对于使用autoprefixer处理sass输出的任何人，您需要添加一对额外的引号，因为url( {{ ... }} )会导致autoprefixer的解析器阻塞。

这样做：

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

*.css.liquid文件中的内容如下：

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

Answer 6

如果您希望为新的自适应结帐使用保留“.scss.liquid”扩展程序：

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

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

Answer 7

我写了一篇文章，描述了我用Compass和Sass与Shopify合作的方法。这与DOMUSNETWORK的答案相同。我将详细介绍文件结构。

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

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

Answer 9

无耻插头......

我认为@nick正走在正确的轨道上。

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

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

您仍然需要为资产网址进行插值，但Quickshot会自动重新编译您的scss并将结果上传到shopify一步。这也使您能够在scss文件中使用@include。

http://quickshot.io/

https://github.com/internalfx/quickshot

使用指南针和Sass购物主题

9 个答案: