带有 Compass 和 Sass 的 Shopify 主题

Posted 2023-02-15

【中文标题】带有 Compass 和 Sass 的 Shopify 主题

【英文标题】：Shopify Theme with Compass and Sass

【发布时间】：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 编译器忽略并按原样输出，但我没有找到任何可行的方法。

【参考方案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