sass - code - shopify editar css

Tema Shopify con Brújula y Sass

Question

¿Alguien tiene un flujo de trabajo para desarrollar temas de Shopify con Compass y Sass? Estoy realmente cerca, solo necesito descubrir cómo no hacer Sass barf en las etiquetas de líquidos de CSS.

Esto es lo que tengo:

• Un proyecto sass / compass en el directorio (ej :, "/ newwebsite /)
• Un subdirectorio que contiene mi tema de Shopify ("/ newwebsite / newwebsite-theme /")
• Compass config.rb que apunta el css, _dir images_dir y javascripts_dir a la carpeta de activos de ellos ("/ newwebsite / newwebsite-theme / asset /")
• Brújula ver en
• shopify_theme gem también puede ver, cargar archivos de temas para shopify (https://github.com/Shopify/shopify_theme)
• EDITAR interpolaciones Sass (ver la respuesta más abajo)
• EDIT Compass callback para cambiar el nombre a .css.liquid

El problema: Compass barf cuando necesita usar las etiquetas de plantillas líquidas de Shopify, por ejemplo, una imagen de fondo, por ejemplo, background: url ("{{" splash-1.jpg "| asset_url}}")

¿Alguien sabe cómo hacer que Compass / Sass escupa las etiquetas de la plantilla líquida como están en el CSS? Si tengo eso, entonces tengo un flujo de trabajo sólido para editar Sass localmente, y realizar los cambios momentáneamente en la tienda de Shopify.

Gracias

EDITAR: Al usar la respuesta de Hopper a continuación para las etiquetas líquidas en Sass, y cambiar el nombre del archivo .css de salida de Compass a .css.liquid, ahora tengo un flujo de trabajo instantáneo para diseñar un tema de Shopify con Compass y Sass. Aquí está el código para la devolución de llamada de Compass que se encuentra en config.rb:

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

Answer 1

¿Cómo evitas que Compass deje de barfing en lógica líquida entre propiedades? Por ejemplo, cada vez que hay una declaración líquida if recibo errores, y el uso de #{''...''} no parece ayudar.

Esta es una prueba que no puedo ponerme a trabajar:

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

ACTUALIZANDO extrañamente, comentando que funciona la lógica líquida:

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

Answer 2

Enchufe descarado ...

Creo que @nick está en el camino correcto.

scss es mejor cuando se compila antes de enviar a Shopify.

Para otros que encuentran esta respuesta, creo que Quickshot es la herramienta que está buscando.

Aún deberá interpolar las URL de activos, pero Quickshot recompilará automáticamente sus scss y cargará el resultado para comprar en un solo paso. Lo que también te da la posibilidad de usar @include en tus archivos scss.

http://quickshot.io/

https://github.com/internalfx/quickshot

Answer 3

Encontré útil eliminar el archivo de salida original después de guardar para que no tenga ese archivo extra, no líquido flotando en el directorio de activos.

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

Answer 4

Escribí un artículo que describe los métodos que utilicé para que Compass y Sass funcionen bien con Shopify. Este es el mismo enfoque de la respuesta de DOMUSNETWORK. Entro un poco más en detalle sobre la estructura de archivos.

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

Answer 5

Esto me funcionó parcialmente, sin embargo, encontré que la aplicación Shopify Theme muchas veces no quería cargar mi archivo editado .css.liquid, porque aparentemente no reconocía que el archivo había sido editado.

Lo que lo resolvió fue usar el siguiente código en mi config.rb, en lugar del código de la pregunta anterior:

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

Answer 6

No estoy familiarizado con Shopify ni con las etiquetas líquidas, pero sí sé que en SASS puede usar interpolations para generar CSS simple como está. Por ejemplo, el SASS aquí:

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

Se compilaría para:

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

¿Eso te acerca a lo que estás buscando?

Answer 7

Para la URL del activo, también puede utilizar las funciones personalizadas de SCSS . Pon esto en tu archivo 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

Y luego úsalo en tu styles.scss como este

background: shopify_image_url(''image.png'');

Answer 8

Si desea conservar la extensión ".scss.liquid" para el nuevo uso responsivo de pago:

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

Renombra los archivos en lugar de copiarlos y luego eliminarlos.

Answer 9

Sobre la base de la respuesta de la tolva, para cualquier persona que use autoprefixer para procesar la salida de Sass, deberá agregar un par adicional de citas porque url( {{ ... }} ) hace que el analizador de autoprefixer se ahogue.

Hacer esto:

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

Que se convierte en esto en el archivo *.css.liquid :

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