LESS CSS和轉義用於shopify主題開發的液體語法

我正在創建Shopify主題，我正在使用LESS編譯Shopify需要的樣式表作爲style.css.liquid。這一切都運行良好util我開始添加在lquid過濾器和if語句。LESS CSS和轉義用於shopify主題開發的液體語法

我有液體語法工作時很CSS屬性：

@brand-colour: ~"{{ settings.brand_colour }}"; 
h1{ color: @brand-colour;}

這編譯成類似：

h1 {color: {{ settings.brandcolour }};

這是罰款。

什麼我不能做的就是插入液體聲明沒有被CSS屬性像在此之前：

{% if settings.full-bg %} 
background-color: …

我試圖逃脫它作爲

~"{% settings… %}"

甚至

然後運行

@{var}

但我的編譯器不喜歡它... ...

有什麼建議？

我知道你正在使用較少，但如果您改用了Sass，您將能夠註冊Liquid構造以忽略，因此Sass會在重新制作您的Liquid時愉快地編譯您的樣式表。這是值得一試的，因爲它只需要一行代碼或兩個教給Sass你自己的處理程序，在這種情況下是一個Liquid處理程序。 –

感謝大衛 - 我想我可能會嘗試切換到SASS，然後 - 我想我會變得更有意義，因爲Shopify是在Ruby on Rails上寫的......謝謝！ –

@DavidLazar你能解釋一下怎麼做？我找不到任何文檔。謝謝！ – rda3000

如果任何人的興趣，我解決這個得到了辦法是把我shopify /液體的東西，在評論，像這樣：

/* {% if settings.repeating-pattern %} */ 
background: url(~"{{ 'repeating-pattern-header.png' | asset_url }}"); 
/* {% endif %} */

而且Shopify榮幸今天。

2012-07-23 22:31:42

只是爲別人可能碰到這個頁面絆倒的信息，你實際上並不需要處理這樣的變量：

h1 { color: #{'{{ settings.brand_colour }}'}; }

：

@brand-colour: ~"{{ settings.brand_colour }}"; 
h1{ color: @brand-colour;}

實際上，你可以用SASS interpolation這樣做

非專業人士的插值只是用#{' '}包裝一個變量，告訴SASS在編譯CSS時將其作爲純文本輸出。

2012-09-14 14:41:30 davidnknight

SASS一個不適合我 - 我試過它作爲unquote（'{{liquid statement}}'） –

如果有人有興趣使用的文件名和文件類型薩斯變量（例如自動生成的@ 2X媒體查詢一個mixin）這是代碼：

background-image: url(#{'{{ "'}#{$filename}.#{$filetype}#{'" | asset_url }}'});

2015-08-03 13:54:53

回答