सास में छवियों पथ में एक चर है?

Question

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

यहाँ मेरा उदाहरण है कि काम नहीं करता है। संकलन पर यह पृष्ठभूमि url संपत्ति में चर के पहले उदाहरण में कहता है ( "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%; }

किसी भी सहायता की सराहना की जाएगी।

Answer 1

क्या आपने इंटरपोलेशन सिंटेक्स की कोशिश की है ?

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

Comments

यह मेरे लिए काम नहीं करता है क्योंकि CssVariablesProcessor वैरिएबल की प्रक्रिया नहीं करता है, भले ही इसका सेट CproDataUriPreProcessor से पहले पूर्वप्रक्रमक के रूप में हो

— अलेक्सई

कम्पास फॉन्ट-फेस मिक्सिन में भी उद्धृत पथ में काम करता है। '#{$fontName}.ext', ..

— फ्लेव

हां, उद्धृत पथ में उपयोग करना बेहतर है। अन्य बुद्धिमान यह netbeans IDE में त्रुटि दिखाता है। url ("# {$ get-path-to-properties} /site/background.jpg")

— Pons Purushothaman

Answer 2

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

$assetPath : "/assets/images";

...

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

देखें प्रक्षेप डॉक्स जानकारी के लिए।

Comments

निश्चित रूप से सीधे चर को इंगित करने के साथ संक्षिप्तता पसंद करते हैं

— skia.heliou

Answer 3

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

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

Answer 4

उपरोक्त सही उत्तरों में कुछ जोड़ना। मैं netbeans IDE का उपयोग कर रहा हूं और यह url(#{$assetPath}/site/background.jpg)इस पद्धति का उपयोग करते समय त्रुटि दिखाता है । यह सिर्फ netbeans त्रुटि थी और sass संकलन में कोई त्रुटि नहीं थी। लेकिन यह त्रुटि netbeans में कोड स्वरूपण को तोड़ देती है और कोड बदसूरत हो जाता है। लेकिन जब मैं इसे नीचे जैसे उद्धरणों के अंदर उपयोग करता हूं, तो यह आश्चर्यचकित करता है!

url("#{$assetPath}/site/background.jpg")

Answer 5

हम निरपेक्ष पथ के बजाय सापेक्ष पथ का उपयोग कर सकते हैं:

$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
@mixin logo {
  background-image: url(#{$logo-img});
}

.logo {
    max-width: 65px;
    @include logo;
 }