Shopify Theme z kompasem i Sassem

Question

Czy ktoś ma przepływ pracy do tworzenia motywów Shopify z Compass i Sass? Jestem bardzo blisko, po prostu muszę wymyślić, jak nie zrobić barfa Sassa na ciekłych tagach CSS.

Oto co mam:

• Projekt Sass/Kompas w katalogu (ex :, "/ newwebsite /)
• to podkatalog zawierający moje Shopify motyw ("/newwebsite/newwebsite-theme/")
• Kompas config.rb który wskazuje na CSS, _dir images_dir i javascripts_dir wszystko do folderu je za aktywa ("/newwebsite/newwebsite-theme/aktywa/")
• Kompas oglądać na
• shopify_theme gem także uważaj, Przesyłanie plików motyw do Shopify (https://github.com/Shopify/shopify_theme)
• EDIT Sass interpolacje (patrz poniżej anser)
• EDIT Kompas oddzwanianie do zmiany nazwy na .css.liquid

problemu : Barf kompasu, gdy musisz użyć płynnych szablonów Shopify, na przykład obraz tła - przykład, tło: url ("{{" splash-1.jpg "| asset_url}} ")

Czy ktoś wie, jak polecić Compassowi/Sassowi wypluwanie płynnych znaczników szablonów w CSS? Jeśli mam to, to mam solidną pracę z edycją Sass lokalnie i realizuję zmienia się na chwilę po na Shopify sklepie

Dzięki

EDIT:. korzystając odpowiedź Hoppera poniżej ciekłych znaczników w Sass, i zmiana nazwy pliku w wyjściowa Compass .css do .css.liquid mam teraz natychmiastowy przepływ pracy przy projektowaniu motywu Shopify z Compass i Sass! Oto kod wywołania zwrotnego Compass, który znajduje się w pliku config.rb:

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

Answer 1

nie jestem zaznajomiony z Shopify lub ciekłych tagów, ale wiem, że w SASS można użyć interpolations do wyjściowego zwykłego CSS jak jest. Na przykład, SASS tutaj:

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

Lepiej być skompilowane do:

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

robi cię blisko tego, co szukasz?

Answer 2

W jaki sposób utrzymujesz Compass z barfingu na płynnej logice między właściwościami? Na przykład. za każdym razem, gdy pojawia się komunikat o błędzie if, otrzymuję komunikat o błędzie, a użycie #{'...'} nie pomaga.

To jest test nie mogę dostać się do pracy:

#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 dziwnie, komentując logikę cieczy działa:

#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 3

Dla url aktywów można również użyć SCSS custom functions. umieścić to w swoim config.rb plik

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

a następnie używać go w swojej styles.scss jak ten

background: shopify_image_url('image.png'); 

Answer 4

ten pracował dla mnie, częściowo - jednak okazało się, że Aplikacja Shopify Theme wielokrotnie nie chciała wgrać mojego edytowanego pliku .css.liquid, ponieważ najwyraźniej nie rozpoznała, że ​​plik został zmodyfikowany.

Co rozwiązać to dla mnie było użyć następującego kodu w moim config.rb, zamiast kodu w pytaniu powyżej:

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

Answer 5

znalazłem to przydatna do usuwania oryginalnego pliku wyjściowego po zapisać tak nie masz tego dodatkowego, płynnego pliku pływającego w reżimie aktywów.

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 6

Opierając się na odpowiedź Hoppera, dla wszystkich osób korzystających autoprefixer przetwarzać wyjście Sass, trzeba by dodać dodatkową parę cytatów, ponieważ parser url({{ ... }}) przyczyn autoprefixer do ssania.

Wykonaj:

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

który staje się to w pliku *.css.liquid:

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

Answer 7

Jeśli chcesz zachować ".scss.liquid" rozszerzenie do nowego elastycznego wykorzystania kasie:

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

Zmienia nazwy plików zamiast kopiować, a następnie usuwać.

Answer 8

Napisałem artykuł opisujący metody, dzięki którym Compass i Sass pracowały dobrze z Shopify. To jest to samo podejście do odpowiedzi DOMUSNETWORK. Zajmuję się bardziej szczegółową strukturą plików.

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

Answer 9

wtyczka Shameless ...

myślę @nick jest na dobrej drodze.

scss jest lepszy, gdy jest skompilowany przed wysłaniem do Shopify.

Dla innych, którzy znajdują tę odpowiedź, myślę, że Quickshot to narzędzie, którego szukasz.

Nadal musisz interpolować dla adresów URL zasobów, ale quickshot automatycznie przekompiluje twój scss i prześle wynik, aby zrobić zakupy w jednym kroku. Co również daje ci możliwość używania @include w twoich plikach scss.

http://quickshot.io/

https://github.com/internalfx/quickshot