Тема Shopify с Compass и Sass

Есть ли у кого-нибудь рабочий процесс для разработки тем Shopify с помощью Compass и Sass? Я действительно близок, мне просто нужно выяснить, как не заставить Sass блевать на жидкие теги CSS.

Вот что у меня есть:

  • Проект sass/compass в каталоге (например: "/newwebsite/")
  • Подкаталог, содержащий мою тему Shopify ("/newwebsite/newwebsite-theme/")
  • Compass config.rb, который указывает css,_dir images_dir и javascripts_dir на их папку с активами ("/newwebsite/newwebsite-theme/assets/")
  • Compass Watch on
  • shopify_theme gem также смотрите дальше, загрузка файлов темы в shopify (https://github.com/Shopify/shopify_theme)
  • РЕДАКТИРОВАТЬ интерполяции Sass (см. ответ ниже)
  • РЕДАКТИРОВАТЬ Обратный вызов Compass для переименования в .css.liquid

Проблема: Compass barf's когда вам нужно использовать жидкие теги шаблонов Shopify, например, фоновое изображение - например, background: url ("{{ "splash-1.jpg" | assets_url }}")

Кто-нибудь знает, как проинструктировать Compass / Sass, чтобы выплевывать жидкие теги шаблона в том виде, в каком они есть, в CSS? Если у меня есть это, то у меня есть надежный рабочий процесс редактирования Sass локально и мгновенной реализации изменений в магазине. й магазин.

Спасибо

РЕДАКТИРОВАТЬ: Используя ответ Хоппера ниже для жидких тегов в Sass и переименовав выходной файл .css Compass в .css.Liquid, теперь у меня есть мгновенный рабочий процесс для разработки темы Shopify с помощью Compass и Sass! Вот код обратного вызова Compass, который находится в config.rb:

on_stylesheet_saved do |filename|
  s = filename + ".liquid"
  puts "copying to: " + s
  FileUtils.cp(filename, s)
  puts "removing: " + filename
end
26
задан AlfonsoML 4 August 2012 в 21:59
поделиться