带有 Compass 和 Sass 的 Shopify 主题答案

【问题标题】：Shopify Theme with Compass and Sass带有 Compass 和 Sass 的 Shopify 主题
【发布时间】：2012-06-29 13:39:07
【问题描述】：

有人有使用 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)
编辑 Sass 插值（参见下面的分析器）
编辑 Compass 回调以重命名为 .css.liquid

问题：当您需要使用 Shopify 的液体模板标签时出现 Compass barf，例如背景图片 - 例如 background: 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

【问题讨论】：

我曾一度尝试这样做，但一无所获。使用自定义 SASS 扩展可能是可能的，或者如果有一个指令告诉 sass 编译器忽略并按原样输出，但我没有找到任何可行的方法。

标签： sass compass-sass liquid shopify

【解决方案1】：

我不熟悉 Shopify 或液体标签，但我知道在 SASS 中您可以使用 interpolations 按原样输出纯 CSS。例如这里的 SASS：

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

将被编译为：

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

这会让你接近你正在寻找的东西吗？

【讨论】：

是的！我还使用 on_stylesheet_saved Compass 回调将 CSS 文件重命名为 .liquid。我现在有一个即时工作流程谢谢 hopper！
我一直在寻找一种方法来做到这一点 +1

【解决方案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 %}
}

更新奇怪的是，评论液体逻辑有效：

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

【讨论】：

谢谢，这真的很有帮助！
这正是我想要的。我正在使用 Gulp，Theme，如果在我的 SCSS 文件下，我在将单引号排序为内联时遇到了麻烦。谢谢！

【解决方案3】：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案5】：

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

这样做：

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

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

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

【讨论】：

【解决方案6】：

如果您希望为新的响应式结帐用途保留“.scss.liquid”扩展名：

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

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

【讨论】：

【解决方案7】：

我写了一篇文章，描述了我用来让 Compass 和 Sass 与 Shopify 一起工作的方法。这与 DOMUSNETWORK 的回答方法相同。我会更详细地介绍文件结构。

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

【讨论】：

【解决方案8】：

这部分对我有用 - 但是我发现 Shopify Theme 应用程序很多时候不想上传我编辑的 .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

【讨论】：

【解决方案9】：

无耻的塞...

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

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

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

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

http://quickshot.io/

https://github.com/internalfx/quickshot

【讨论】：