29

有人有使用 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 插值（见下面的分析器）
  • 编辑指南针回调以重命名为 .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
4

9 回答 9

23

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

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

将被编译为：

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

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

于 2012-06-28T15:06:09.513 回答
10

您如何防止 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 %} */
}
于 2012-10-04T23:07:03.477 回答
2

对于资产 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');
于 2013-05-28T11:35:58.600 回答
1

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

on_stylesheet_saved do |filename|
  s = filename + ".liquid"
  puts "copying to: " + s
  FileUtils.cp(filename, s)
  puts "removing: " + filename
  FileUtils.remove_file(filename)
end
于 2014-02-07T05:27:13.117 回答
1

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

做这个：

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

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

background: url( '{{ "splash-1.jpg" | asset_url }}' )
于 2014-04-25T16:15:14.207 回答
1

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

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

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

于 2014-12-21T11:45:18.467 回答
1

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

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

于 2015-02-28T15:53:44.310 回答
0

这部分地对我有用 - 但是我发现 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
于 2013-10-15T07:32:10.350 回答
0

无耻的插...

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

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

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

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

http://quickshot.io/

https://github.com/internalfx/quickshot

于 2015-04-10T19:18:25.347 回答