Thème Shopify avec boussole et Sass

comment empêcher Compass d'aboyer sur la logique liquide entre les propriétés? Par exemple: chaque fois qu'il y a un liquide if j'ai des erreurs, et à l'aide de #{'...'} ne semble pas aider.

Ceci est un test, je ne peux pas vous mettre au travail:

#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 bizarrement, les commentaires de liquide logique fonctionne:

#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 %} */
}

pour l'url des ressources, vous pouvez aussi utiliser SCSS fonctions personnalisées. Mettez ceci dans votre config.rb le fichier

module Sass::Script::Functions
  def shopify_image_url(string)
    assert_type string, :String
    Sass::Script::String.new("url({{'#{string.value}' | asset_url}})")
  end
end

Et ensuite l'utiliser dans votre les styles.scss comme ceci

background: shopify_image_url('image.png');

j'ai trouvé utile de supprimer le fichier de sortie original après l'enregistrer pour que vous n'ayez pas ce fichier supplémentaire, non liquide flottant dans le dir des actifs.

on_stylesheet_saved do |filename|
  s = filename + ".liquid"
  puts "copying to: " + s
  FileUtils.cp(filename, s)
  puts "removing: " + filename
  FileUtils.remove_file(filename)
end

en S'appuyant sur la réponse de hopper, pour quiconque utilise autoprefixer pour traiter la sortie sass, vous devez ajouter une paire de guillemets supplémentaires parce que url( {{ ... }} ) provoque l'étouffement de l'analyseur du pilote automatique.

Faire ceci:

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

qui devient ceci dans le *.css.liquid fichier :

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

si vous souhaitez préserver le ".scss.extension liquid" pour la nouvelle utilisation responsive checkout:

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

il renomme les fichiers au lieu de les copier et de les supprimer.

j'ai écrit un article décrivant les méthodes que J'ai utilisées pour obtenir Compass et Sass bien travailler avec Shopify. C'est la même approche de la réponse de DOMUSNETWORK. Je vais dans un peu plus de détails sur la structure des fichiers.

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

cela a fonctionné pour moi, en partie-cependant j'ai trouvé que le thème Shopify app beaucoup de fois ne voulait pas télécharger mon Edité .CSS.liquid file, parce qu'apparemment il n'a pas reconnu que le fichier avait été édité.

ce qui l'a résolu pour moi était d'utiliser le code suivant dans ma configuration.rb, au lieu du code dans la question ci-dessus:

on_stylesheet_saved do |filename|
  move_to = filename + ".liquid"
  puts "Moving from #{filename} to #{move_to}"
  FileUtils.mv(filename, move_to)
end

plug sans vergogne...

je pense que @nick est sur la bonne voie.

scss est meilleur quand il est compilé avant l'envoi à Shopify.

Pour les autres qui trouvent cette réponse, je pense que Quickshot est l'outil que vous recherchez.

vous aurez toujours besoin d'interpoler les urls des actifs, mais quickshot va automatiquement recompiler votre scss et télécharger le résultat pour shopify en une seule étape. Qui vous donne également la possibilité d'utiliser @include dans votre scss fichier.

http://quickshot.io/

https://github.com/internalfx/quickshot