29

CompassとSassを使用してShopifyテーマを開発するためのワークフローを持っている人はいますか？私は本当に親密です。CSSの液体タグでSassバーフを作成しない方法を理解する必要があります。

これが私が持っているものです：

  • ディレクトリ内のsass/compassプロジェクト（例：、 "/ newwebsite /）
  • Shopifyテーマを含むサブディレクトリ（ "/ newwebsite / newwebsite-theme /"）
  • css、_dir images_dirおよびjavascripts_dirをすべてそれらのアセットフォルダー（ "/ newwebsite / newwebsite-theme / asserts /"）にポイントするCompassconfig.rb
  • コンパスウォッチ
  • shopify_theme gemも監視し、テーマファイルをshopifyにアップロードします（https://github.com/Shopify/shopify_theme）
  • Sass補間を編集します（以下のanserを参照）
  • コンパスコールバックを編集して、名前を.css.liquidに変更します

問題：Shopifyの液体テンプレートタグを使用する必要がある場合のコンパスバーフ（背景画像など）-例：background：url（ "{{"splash-1.jpg "| Asset_url}}"）

液体テンプレートタグをCSSにそのまま吐き出すようにCompass/Sassに指示する方法を知っている人はいますか？それがあれば、Sassをローカルで編集し、Shopifyショップですぐに変更を実現するという確かなワークフローがあります。

ありがとう

編集：Sassの液体タグに以下のHopperの回答を使用し、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
4

9 に答える 9

23

私は Shopify や Liquid タグには詳しくありませんが、SASS では補間を使用してプレーンな CSS をそのまま出力できることは知っています。たとえば、ここの SASS:

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

次のようにコンパイルされます。

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

それはあなたが探しているものにあなたを近づけますか？

于 2012-06-28T15:06:09.513 に答える
10

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 %} */
}
于 2012-10-04T23:07:03.477 に答える
1

ホッパーの回答に基づいて、autoprefixer を使用して sass 出力を処理する人は、url( {{ ... }} )autoprefixer のパーサーがチョークするため、引用符のペアを追加する必要があります。

これを行う：

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

ファイルでこれになり*.css.liquidます：

background: url( '{{ "splash-1.jpg" | asset_url }}' )
于 2014-04-25T16:15:14.207 に答える
1

保存後に元の出力ファイルを削除すると便利であることがわかりました。これにより、余分な非液体ファイルが資産ディレクトリに浮かびません。

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-07T05:27:13.117 に答える
1

Compass と Sass を Shopify とうまく連携させるために使用した方法を説明する記事を書きました。これはDOMUSNETWORKの回答と同じアプローチです。ファイル構造についてもう少し詳しく説明します。

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

于 2015-02-28T15:53:44.310 に答える
1

新しいレスポンシブチェックアウト用に「.scss.liquid」拡張子を保持したい場合:

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

コピーしてから削除するのではなく、ファイルの名前を変更します。

于 2014-12-21T11:45:18.467 に答える