रेल 3.1 का उपयोग करते समय मैं सैस में संदर्भ छवियों का उपयोग कैसे करूं?

Question

मेरे पास एक रेल 3.1 परियोजना है जिसमें संपत्ति पाइपलाइन महान काम कर रही है। समस्या यह है कि मुझे अपने सास में छवियों का संदर्भ देने की आवश्यकता है, लेकिन रेल छवि यूआरएल की गणना करता है। (यह उत्पादन, जहां रेल उसके फ़ाइलनाम करने के लिए छवि का Git हैश संलग्न कर देता है कैश खराब करने के लिए विशेष रूप से महत्वपूर्ण है।)

उदाहरण के लिए, app/assets/stylesheets/todos.css.scss में:

.button.checkable { background-image: url(/assets/tick.png); } 

जब मैं तैनात (या rake assets:precompile चलाने) , फ़ाइल app/assets/images/tick.png को public/assets/tick-48fe85c0a.png या इसी तरह के कुछ स्थानांतरित कर दिया गया है। यह सीएसएस तोड़ता है। - इसके बजाय उन्हें public/images/ में डाल दिया और उन्हें सीधे

उपयोग ERB संदर्भ अपने सीएसएस के लिए और रेल चित्र URL बाहर काम करते हैं

1. छवियों के लिए संपत्ति पाइपलाइन उपयोग नहीं करते: This post दो सुझाव बनाते हैं।

संख्या 1 निश्चित रूप से एक संभावना है, हालांकि इसका मतलब है कि मुझे अपनी छवियों पर कैश-बस्टिंग नहीं मिलती है। संख्या 2 बाहर है क्योंकि मैं फ़ाइलों का संसाधित करने के लिए एसएएस का उपयोग कर रहा हूं, ईआरबी नहीं।

Answer 1

चाल करना चाहिए निम्नलिखित:

image-url('asset_name') 
audio-path('asset_name') 

सामान्य

[asset_type]-url('asset_name') #Becomes url('assets/asset_name') 
[asset_type]-path('asset_name') #Becomes 'assets/asset_name' 

ASSET_TYPE में:

वास्तव में

.button.checkable { background-image: url(image_path('tick.png')); } 

रेल संपत्ति को संदर्भित करने के सहायकों का एक समूह प्रदान करता है निम्न में से एक हो सकता है: छवि, फ़ॉन्ट, वीडियो, ऑडियो, जावास्क्रिप्ट, स्टाइलशीट

Answer 2

विकल्प 2 का एक संस्करण काम करेगा। आप कुछ इस तरह है:

app/assets/stylesheets/pancakes_house.css.less.erb 

और आप अपने application.css फ़ाइल में require। फिर pancakes_house पहले ईआरबी के माध्यम से जाता है और वह आउटपुट कम प्रोसेसर के माध्यम से जाता है और जो कुछ भी आता है वह आपके सीएसएस में जाता है। अपने एससीएसएस के अंदर ईआरबी डालने से थोड़ा अजीब लग सकता है, लेकिन हे, यह काम करेगा और बहुत अधिक अजीबता के बिना काम पूरा करेगा।

तो आपको अपने ईआरबी के माध्यम से अपने कैश-बस्टिंग छवि पथ बनाने के लिए आवश्यक विधियों को प्राप्त करने में सक्षम होना चाहिए।

मैंने केवल इसे कम फ़ाइल के साथ करने की कोशिश की लेकिन इसे .css.scss.erb के साथ भी काम करना चाहिए।

---

एक के रूप में एक तरफ, आप भी your own functions to SASS जोड़ सकते हैं:

इस मॉड्यूल में

तरीके SassScript संदर्भ से सुलभ हैं। उदाहरण के लिए, आप

$color = hsl(120deg, 100%, 50%) 

लिख सकते हैं और यह Sass::Script::Functions#hsl पर कॉल करेगा।

मैन्युअल में कुछ instructions on writing your own functions भी कुछ और नीचे हैं। हालांकि, मुझे यकीन नहीं है कि स्प्राकेट्स को अपने Sass::Script::Functions पैच लोड करने के लिए कैसे प्राप्त करें ताकि मैं इसे एक व्यावहारिक समाधान नहीं कह सकूं; मेरे से मजबूत स्प्राकेट फू वाला कोई व्यक्ति इस दृष्टिकोण को काम करने में सक्षम हो सकता है और मैं इसे ईआरबीफाइड एससीएसएस की तुलना में अधिक सुरुचिपूर्ण कहूंगा।

Answer 3

आप आसानी संख्या 2 का उपयोग कर सकते है, बस अपने .scss फाइल करने के लिए .erb एक्सटेंशन जोड़ने:

app/assets/stylesheets/todos.css.scss.erb 

और asset_path विधि का उपयोग हैश के साथ छवि के लिए पथ प्राप्त करने के लिए:

.button.checkable { background-image: url('<%= asset_path 'tick.png' %>'); } 

इस फाइल हो जाएगा erb द्वारा संसाधित और फिर sass द्वारा संसाधित किया गया।

Answer 4

एसएएस-रेल रत्न एसएएस कार्यों को परिभाषित करता है जिसे एसएएस से ईआरबी प्रसंस्करण के बिना इस्तेमाल किया जा सकता है। https://github.com/rails/sass-rails

Answer 5

उन लोगों के लिए जो उपयोगकर्ताओं के लिए तेज़ लोड समय के पक्ष में हैं, क्या मैं बेस 64 में सीएसएस में छवियों को लोड करने के लिए स्टीव सॉउडर टिप के बाद सुझाव दे सकता हूं।

संपत्ति-डेटा-यूआरएल ('पथ')

https://github.com/rails/sass-rails#asset-helpers

Answer 6

संपत्ति पाइप लाइन का उपयोग कर, संपत्ति के लिए रास्तों को फिर से लिखा जाना चाहिए और सास-रेल (-url और -path सहायकों प्रदान करता है हाइफन निम्नलिखित संपत्ति वर्गों के लिए सब्स में, रूबी में अंडरस्कोर): छवि, फ़ॉन्ट, वीडियो, ऑडियो, जावास्क्रिप्ट और स्टाइलशीट।

छवि यूआरएल ("rails.png") देता है यूआरएल (/assets/rails.png) छवि पथ ("rails.png") रिटर्न "/assets/rails.png"

अधिक जेनेरिक फॉर्म का भी उपयोग किया जा सकता है:

परिसंपत्ति-यूआरएल ("rails.png") यूआरएल (/assets/rails.png) देता है परिसंपत्ति-पथ ("rails.png") रिटर्न "/assets/rails.png "