在Sass中有圖像路徑中的變量嗎？

我想有一個變量，它包含我的CSS文件中所有圖像的根路徑。我無法弄清楚這是否可以在純Sass中使用（實際的Web項目不是RoR，所以不能使用asset_pipeline或任何那種花哨的爵士樂）。在Sass中有圖像路徑中的變量嗎？

這是我的例子，不起作用。在編譯時，它在後臺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%; }

任何幫助，將不勝感激。

來源

2011-12-22 program247365

153

您是否嘗試過Interpolation語法？

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

來源

2011-12-22 18:59:05

它對我不起作用，因爲CssVariablesProcessor不處理變量，即使它在CssDataUriPreProcessor之前設置爲預處理器 – Alexey 2014-07-31 08:53:40

這太美了我想我'我會哭泣 – 2017-02-09 17:08:40

也適用於引用的路徑例如在指南針font-face mixin中。 ''＃{$ fontName} .ext'，..' – Fleuv 2018-02-12 08:04:07

無需功能：

$assetPath : "/assets/images"; 

... 

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

有關詳細信息，請參閱interpolation docs。

來源

2011-12-22 18:58:40 steveax

看起來像@Madmartigan先到那裏，所以我將他標記爲答案，儘管你的答案也是正確的。謝謝！ – program247365 2011-12-22 20:15:50

+1謝謝關於插值文檔的說明 – Shanimal 2013-07-11 20:47:57

肯定喜歡直接指向變量的簡潔性 – 2015-04-28 15:23:14

是尋找周圍的答案，同樣的問題，但認爲我找到了一個更好的解決方案：http://blog.grayghostvisuals.com/compass/image-url/

基本上，你可以設置你的圖像路徑config.rb和使用圖像的URL （）幫手

來源

2013-03-22 17:15:24 NerdCowboy

在Sass中有圖像路徑中的變量嗎？

回答

相關問題