2011-12-22 12 views
89

मैं एक वैरिएबल रखना चाहता हूं जिसमें मेरी सीएसएस फ़ाइल में मेरी सभी छवियों का मूल पथ शामिल है। शुद्ध एसएएस में यह संभव नहीं है (वास्तविक वेब प्रोजेक्ट आरओआर नहीं है, इसलिए मैं एसेट_पिपलाइन या उस फैंसी जैज़ का उपयोग नहीं कर सकता)।सास में छवियों के पथ में एक चर है?

यहां मेरा उदाहरण है जो काम नहीं करता है। पृष्ठभूमि यूआरएल संपत्ति में चर के पहले उदाहरण पर यह संकलित करें ("Invalid CSS after "..site/background": expected ")")।

समारोह को परिभाषित पथ पर लौटने के लिए:

//Vars 
$assetPath : "/assets/images"; 

//Functions 
@function get-path-to-assets($assetPath){ 
    @return $assetPath; 
} 

समारोह का उपयोग करना:

body { 
    margin: 0 auto; 
    background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0; 
    width: 100%; } 

किसी भी मदद की सराहना की जाएगी।

उत्तर

153

क्या आपने Interpolation वाक्यविन्यास का प्रयास किया है?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0; 
+0

पर इंगित करने के साथ ब्रेवटी को प्राथमिकता से पसंद करते हैं यह मेरे लिए काम नहीं करता है क्योंकि CssVariablesProcessor CssDataUriPreProcessor – Alexey

+8

से पहले प्रीप्रोसेसर के रूप में सेट होने पर चर को संसाधित नहीं करता है, यह बहुत सुंदर है मुझे लगता है कि मैं ' मैं –

+0

रोने जा रहा हूं उद्धृत पथों में भी काम करता है उदा। कंपास फ़ॉन्ट फेस फेसिन में। ''{{fontName} .ext', ..' – Fleuv

69

एक समारोह के लिए कोई ज़रूरत नहीं:

$assetPath : "/assets/images"; 

... 

body { 
    margin: 0 auto; 
    background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0; 
    width: 100%; } 

जानकारी के लिए interpolation docs देखें।

+0

ऐसा लगता है कि @Madmartigan पहले वहां पहुंचा, इसलिए मैं उसे उत्तर के रूप में चिह्नित कर रहा हूं, भले ही आपका भी सही है। धन्यवाद! – program247365

+0

+1 इंटरपोलेशन डॉक्स पर नोट के लिए धन्यवाद – Shanimal

+5

निश्चित रूप से परिवर्तनीय –

6

एक ही प्रश्न का उत्तर के लिए चारों ओर खोज रहा था, लेकिन मैं एक बेहतर समाधान पाया लगता है: मूल रूप से http://blog.grayghostvisuals.com/compass/image-url/

, आप config.rb में अपनी छवि पथ सेट कर सकते हैं और आप छवि यूआरएल का उपयोग() सहायक

संबंधित मुद्दे