Поиск темы с помощью Compass и Sass

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

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

Проект sass/compass в каталоге (ex:, "/newwebsite/)
Подкаталог, содержащий мою тему Shopify ( "/newwebsite/newwebsite-theme/" )
Компас config.rb, который указывает css, _dir images_dir и javascripts_dir все в папку с их ресурсами ( "/newwebsite/newwebsite-theme/assets/" )
Компас смотреть
shopify_theme gem также следит за загрузкой файлов тем для покупки (https://github.com/Shopify/shopify_theme)
EDIT Sass интерполяции (см. anser ниже)
Отредактируйте обратный вызов Compass для переименования в .css.liquid

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

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

Спасибо

EDIT: Используя Hopper ниже для жидких меток в Sass и переименовав файл Compass.css в .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

Ответ 1

Я не знаком с Shopify или ярлыками, но я знаю, что в SASS вы можете использовать интерполяции для вывода простого CSS as- является. Например, здесь SASS:

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

Будет скомпилирован:

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

Это близко к тому, что вы ищете?

Ответ 2

Как вы держите компас от barfing на жидкой логике между свойствами? Например. всякий раз, когда появляется жидкое выражение 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 %} */
}

Ответ 3

Для URL-адреса актива вы также можете использовать пользовательские функции SCSS. Поместите это в свой файл 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

И затем используйте его в своих стилях .scss, как это

background: shopify_image_url('image.png');

Ответ 4

Мне было полезно удалить исходный выходной файл после сохранения, чтобы у вас не было этого лишнего, нежидкостного файла, плавающего в каталоге ресурсов.

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

Ответ 5

На основе ответа на загрузчик, для тех, кто использует autoprefixer для обработки sass-вывода, вам нужно будет добавить дополнительную пару кавычек, потому что url( {{ ... }} ) заставляет парсер autoprefixer задыхаться.

Сделайте это:

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

Что будет в файле *.css.liquid:

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

Ответ 6

Если вы хотите сохранить расширение ".scss.liquid" для новой отзывчивой проверки:

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

Он переименовывает файлы вместо копирования и затем удаляет.

Ответ 7

Я написал статью, описывающую методы, которые я использовал для того, чтобы Compass и Sass хорошо работали с Shopify. Это тот же подход ответа DOMUSNETWORK. Я подробно расскажу о структуре файла.

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

Ответ 8

Это сработало для меня, частично - однако я обнаружил, что приложение Shopify Theme много раз не захотело загрузить мой отредактированный файл .css.liquid, потому что, видимо, он не узнал, что файл был отредактирован.

Для меня это решил использовать следующий код в моем config.rb вместо кода в вопросе выше:

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

Ответ 9

Бесстыдный плагин...

Я думаю, что @nick на правильном пути.

scss лучше, когда он скомпилирован перед отправкой в Shopify.

Для других, кто находит этот ответ, я считаю, что Quickshot - это инструмент, который вы ищете.

Вам все равно нужно интерполировать URL-адреса ресурсов, но quickshot автоматически перекомпилирует ваш scss и загрузит результат, чтобы совершить покупку за один шаг. Что также дает вам возможность использовать @include в ваших scss файлах.

http://quickshot.io/

https://github.com/internalfx/quickshot