3

Shopifyテーマを作成しており、LESSを使用してShopifyがstyle.css.liquidとして必要とするスタイルシートをコンパイルしています。lquidフィルターとifステートメントを追加し始めたutilはすべて正常に機能していました。

cssプロパティにあるときにLiquid構文が機能しています。

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

これは次のようにコンパイルされます：

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

大丈夫です。

私ができることは、次のようなcssプロパティの前になくても、液体ステートメントを挿入することです。

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

私はそれをエスケープしようとしました

~"{% settings… %}"

そしてさえ

@var: "{% if settings.full-bg %}"

その後、実行します

@{var}

しかし、私のコンパイラはそれが好きではありません…</ p>

助言がありますか？

4

3 に答える 3

6

誰かが興味を持っているなら、私がこれを回避する方法は、私のshopify /Liquidのものをコメントに入れることでした：

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

そしてShopifyはこれを尊重しました。

于 2012-07-23T22:31:42.363 に答える
6

このページに出くわす可能性のある他の人のための情報として、実際には次のような変数を処理する必要はありません:

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

実際には、次のようなSASS 補間を使用して実行できます。

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

#{' '}素人の言葉で言えば、補間は、CSS をコンパイルするときにこれをプレーンテキストとして出力するように SASS に指示する変数をラップするだけです。

于 2012-09-14T14:41:30.450 に答える
0

ファイル名とファイルタイプに Sass 変数を使用することに関心がある場合 (たとえば、@2x メディア クエリを自動的に生成する mixin)、これは次のコードです。

background-image: url(#{'{{ "'}#{$filename}.#{$filetype}#{'" | asset_url }}'});
于 2015-08-03T13:54:53.630 に答える