कम्पास और सास के साथ Shopify थीम

Question

क्या किसी के पास कम्पास और सास के साथ Shopify थीम विकसित करने के लिए वर्कफ़्लो है? मैं वास्तव में करीब हूं, मुझे बस यह पता लगाने की आवश्यकता है कि सीएसएस तरल टैग पर सास बारफ कैसे नहीं बनाया जाए।

यहाँ मैं क्या मिल गया है:

• निर्देशिका (पूर्व :, "/ newwebsite /)
• मेरी Shopify विषय युक्त उप-निर्देशिका ("/newwebsite/newwebsite-विषय में एक सास/कम्पास परियोजना/")
• एक कम्पास config.rb कि (उनमें की संपत्ति फ़ोल्डर में सीएसएस, _dir images_dir और javascripts_dir सब बताते हैं"/newwebsite/newwebsite-विषय/संपत्ति/")
• कम्पास
• shopify_theme मणि पर देखते हैं भी देखो, Shopify पर अपलोड विषय फ़ाइलें (https://github.com/Shopify/shopify_theme)
• संपादित सास छेड़छाड़ (नीचे anser देखें)
• संपादित कम्पास कॉलबैक .css.liquid को

समस्या नाम बदलने के लिए : कम्पास बारफ जब आपको Shopify के तरल templating टैग का उपयोग करने की आवश्यकता होती है, उदाहरण के लिए, एक पृष्ठभूमि छवि - उदाहरण, पृष्ठभूमि: url ("{{" splash-1.jpg "| estate_url}} ")

क्या कोई जानता है कि कैसे वे सीएसएस में तरल टेम्पलेट टैग को थूकने के लिए कम्पास/सास को निर्देशित करने के लिए निर्देशित करते हैं? यदि मेरे पास यह है, तो मेरे पास सैसा को स्थानीय रूप से संपादित करने का ठोस वर्कफ़्लो है, और साकार करना Shopify दुकान पर क्षण भर के बाद परिवर्तन

धन्यवाद

संपादित करें:। सास में तरल टैग के लिए नीचे दिए गए हूपर के जवाब का उपयोग कर, और नाम बदलने कम्पास उत्पादन .css फ़ाइल .css.liquid, मैं अब तक कम्पास और सास के साथ एक Shopify विषय डिजाइन करने के लिए एक तात्कालिक वर्कफ़्लो! यहां कॉन्फ़ास कॉलबैक के लिए कोड है जो config.rb में जाता है:

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

Answer 1

मैं Shopify या तरल टैग से परिचित नहीं हूँ, लेकिन मुझे पता है कि एस.ए.एस.एस. में आप के रूप में-है उत्पादन सादे सीएसएस के लिए interpolations का उपयोग कर सकते है। उदाहरण के लिए, यहाँ एस.ए.एस.एस.:

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

है कि आप आप के लिए जा रही खोज से बंद हो जाता है:

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

को संकलित किया जा चाहेंगे?

Answer 2

आप गुणों के बीच तरल तर्क पर बार्फ़िंग से कम्पास कैसे रखते हैं? जैसे किसी भी समय तरल 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 %} */ 
} 

Answer 3

संपत्ति यूआरएल के लिए आप भी SCSS custom functions उपयोग कर सकते हैं

यह एक परीक्षण मैं काम करने के लिए नहीं मिल सकता है। अपने 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 

और फिर अपने styles.scss में इसका इस्तेमाल इस

background: shopify_image_url('image.png'); 

Answer 4

यह मेरे लिए काम किया जैसे, आंशिक रूप से - लेकिन मैंने पाया कि Shopify थीम ऐप कई बार मेरी संपादित .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 

Answer 5

मैंने पाया यह मूल आउटपुट फ़ाइल को दूर करने के बाद इतनी बचाने उपयोगी आपके पास संपत्तियों में तैरने वाली अतिरिक्त, गैर तरल फ़ाइल नहीं है।

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

हॉपर के जवाब पर बिल्डिंग, सास उत्पादन पर कार्रवाई करने के autoprefixer का उपयोग कर किसी के लिए है, तो आप क्योंकि गला घोंटना करने के लिए url({{ ... }}) कारणों autoprefixer के पार्सर उद्धरण के एक अतिरिक्त जोड़ी को जोड़ने के लिए की आवश्यकता होगी।

यह करें:

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

कौन सा *.css.liquid फ़ाइल में इस हो जाता है:

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

Answer 7

आप नए उत्तरदायी चेकआउट उपयोग के लिए ".scss.liquid" विस्तार संरक्षित करना चाहते हैं:

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

यह प्रतिलिपि बनाने और फिर हटाने के बजाय फ़ाइलों का नाम बदलता है।

Answer 8

मैंने एक लेख लिखा है जिसका उपयोग मैंने कम्पास और सास को Shopify के साथ अच्छी तरह से काम करने के लिए किया था। यह डोमसनेटवर्क के उत्तर का एक ही दृष्टिकोण है। मैं फ़ाइल संरचना पर थोड़ा और विस्तार में जाता हूं।

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

Answer 9

बेशर्म प्लग ...

मुझे लगता है कि @nick सही रास्ते पर है।

एसएसएसएस बेहतर है जब इसे Shopify पर भेजने से पहले संकलित किया जाता है।

अन्य लोगों के लिए जो इस उत्तर को पाते हैं, मुझे लगता है कि क्विकशॉट वह टूल है जिसे आप ढूंढ रहे हैं।

आपको अभी भी संपत्ति यूआरएल के लिए इंटरपोलेट करने की आवश्यकता होगी, लेकिन क्विकशॉट स्वचालित रूप से आपके स्कैस को फिर से संकलित कर देगा और एक चरण में खरीदारी करने के लिए परिणाम अपलोड करेगा। जो आपको आपकी स्कैस फ़ाइलों में @include का उपयोग करने की क्षमता भी देता है।

http://quickshot.io/

https://github.com/internalfx/quickshot