Shopify Theme with Compass and Sass

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

下面是我有：

目录（例如：， “/ newwebsite /）
一个包含我的Shopify主题子目录（”/ newwebsite/newwebsite主题A SASS /指南针项目/ “）
指南针config.rb”/ newwebsite/newwebsite主题/资产/“）
指南针观看
shopify_theme宝石也看，上传主题文件shopify（https://github.com/Shopify/shopify_theme）
编辑萨斯插补（见下文雁）
编辑指南针回调重命名为.css.liquid

问题：当您需要使用Shopify的液体模板标签时，指南针barf的，例如背景图像 - 例如，背景：url（“{{”splash-1.jpg“| “）

有没有人知道如何指示Compass/Sass吐出液态模板标签，因为他们到CSS？如果我有，那么我有一个可靠的本地编辑Sass工作流程，并实现该变化对shopify店暂存之后

感谢

编辑：使用Hopper的回答下面的萨斯液体标签和重命名罗盘输出.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

来源

2012-06-28 wart

我试图在一个点上做到这一点，毫无进展。这可能是一个自定义的SASS扩展，或者如果有一个指令，告诉sass编译器忽略和输出，但我没有找到任何可行的。 –

我不熟悉Shopify或液体的标签，但我知道，在上海社会科学院你可以使用interpolations输出纯CSS原样。例如，SASS这里：

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

会被编译为：

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

这是否让你接近你在找什么？

来源

2012-06-28 15:06:09 hopper

是的！我还使用on_stylesheet_saved Compass回调来将CSS文件重命名为.liquid。我现在有一个即时的工作流程谢谢料斗！ – wart

我一直在寻找一种这么久的方式+1 – chrixian

我带给你未来的感谢！ – Leland

如何保持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 %} 
}

UPDATE古怪，评论液体的逻辑原理：

#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-04 23:07:03 rda3000

有趣..很高兴知道 – chrixian

谢谢，这真的很有帮助！ –

你是冠军。 – agconti

资产的网址，你也可以使用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');

来源

2013-05-28 11:35:58

这为我工作，部分 - 但是，我发现， 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-15 07:32:10 Rinocerontes

我认为应该删除原来的输出文件保存后如此您没有在资产目录中浮动的额外非流动文件。

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-07 05:27:13

上料斗的回答大厦使用autoprefixer处理SASS输出任何人，你将需要添加一个额外的对引号的，因为url({{ ... }})原因autoprefixer的解析器能够呛。

这样做：

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

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

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

来源

2014-04-25 16:15:14 CheapSteaks

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

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

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

来源

2014-12-21 11:45:18

我写了一篇文章，描述了我用于使Compass和Sass与Shopify良好协作的方法。这与DOMUSNETWORK的答案是相同的。我会详细介绍一下文件结构。

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

来源

2015-02-28 15:53:44 nick

无耻插头...

我觉得@nick是在正确的轨道上。

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

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

您仍然需要为资源网址插值，但quickshot会自动重新编译您的scss并上传结果以一步完成购物。这也使您能够在您的scss文件中使用@include。

http://quickshot.io/

https://github.com/internalfx/quickshot

来源

2015-04-10 19:18:25 InternalFX

Shopify Theme with Compass and Sass

回答

相关问题