Есть ли у кого-нибудь рабочий процесс для разработки Shopify тем с Compass и Sass? Я действительно близок, мне просто нужно выяснить, как не сделать Sass barf на тегах с CSS-тегами.
Вот что у меня есть:
Проблема: 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
Я не знаком с Shopify или ярлыками, но я знаю, что в SASS вы можете использовать интерполяции для вывода простого CSS as- является. Например, здесь SASS:
.test {
background: url( #{'{{ "splash-1.jpg" | asset_url }}'} )
}
Будет скомпилирован:
.test {
background: url({{ "splash-1.jpg" | asset_url }}); }
Это близко к тому, что вы ищете?
Как вы держите компас от 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 %} */
}
Для 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');
Мне было полезно удалить исходный выходной файл после сохранения, чтобы у вас не было этого лишнего, нежидкостного файла, плавающего в каталоге ресурсов.
on_stylesheet_saved do |filename|
s = filename + ".liquid"
puts "copying to: " + s
FileUtils.cp(filename, s)
puts "removing: " + filename
FileUtils.remove_file(filename)
end
На основе ответа на загрузчик, для тех, кто использует autoprefixer для обработки sass-вывода, вам нужно будет добавить дополнительную пару кавычек, потому что url( {{ ... }} ) заставляет парсер autoprefixer задыхаться.
Сделайте это:
background: url( "#{'{{ "splash-1.jpg" | asset_url }}'}" )
Что будет в файле *.css.liquid:
background: url( '{{ "splash-1.jpg" | asset_url }}' )
Если вы хотите сохранить расширение ".scss.liquid" для новой отзывчивой проверки:
on_stylesheet_saved do |filename|
FileUtils.mv filename, "#{File.dirname(filename)}/#{File.basename(filename,'.*')}.scss.liquid"
end
Он переименовывает файлы вместо копирования и затем удаляет.
Я написал статью, описывающую методы, которые я использовал для того, чтобы Compass и Sass хорошо работали с Shopify. Это тот же подход ответа DOMUSNETWORK. Я подробно расскажу о структуре файла.
Это сработало для меня, частично - однако я обнаружил, что приложение 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
Бесстыдный плагин...
Я думаю, что @nick на правильном пути.
scss лучше, когда он скомпилирован перед отправкой в Shopify.
Для других, кто находит этот ответ, я считаю, что Quickshot - это инструмент, который вы ищете.
Вам все равно нужно интерполировать URL-адреса ресурсов, но quickshot автоматически перекомпилирует ваш scss и загрузит результат, чтобы совершить покупку за один шаг. Что также дает вам возможность использовать @include в ваших scss файлах.