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

回答

相關問題