有沒有辦法爲LESS文件設置通用圖像路徑？

Question

我正在使用LESS樣式語言。現在

.side-bg 
{ 
    background:url(../img/layout/side-bg.jpg) top no-repeat;  
} 

右鍵我的所有圖片都是文件夾../img/中我希望能夠設置一個變量作爲圖像路徑並使用它像這樣：

考慮以下CSS

@image-path: ../img; 

.side-bg 
{ 
    background:url(@image-path/layout/side-bg.jpg) top no-repeat; 
} 

但這不起作用。它不是一個很大的交易，我總是可以使用找到並替換如果圖像文件夾曾經改變。我剛開始學習LESS，並想知道這樣的事情是否可能。

Answer 1

嘗試使用字符串插值這樣的事情。在docs中查找「可變插值」。

@base-url: "http://assets.fnord.com"; 
background-image: url("@{base-url}/images/bg.png"); 

Answer 2

安東Strogonoff的answer是好的，但要注意的Issue @294的：

使用從文檔來直上，我得到url://pathtolessfile/variable我設置。儘管我試圖設置絕對URL而不是相對的URL。例如這個工程

@base-url: "../../images/"; 
@background-image : url ("@{base-url}/bg.png"); 

但這不起作用

$base-url: "http://localhost/ns/assets/images/"; 
@background-image : url ("@{base-url}/bg.png"; 

在後一個例子，我的最終的源路徑變得

http://localhost/ns/assets/css/libs/http://localhost/ns/assets/images/bg.png 

Answer 3

解決辦法：

.side-bg 
{ 
    background : ~"url('@{image-path}/layout/side-bg.jpg')" top no-repeat; 
} 

Answer 4

這裏是更新和乾淨的方式來處理圖像路徑s的LESS：

開始與你的變量：

@imagePath: ~"../images/bg/"; 

然後使用它是這樣的：

.main-bg { 
    background: url('@{imagePath}my-background-image.png') repeat scroll left top; 
} 

確保@imagePath變量指向圖像文件夾在任何地方，你有你的編譯CSS，而不是從哪裏你有你的LESS文件。另外，你必須像上面的例子那樣在變量中隱藏地址，以確保它不會被less.js重寫。

Answer 5

我正在尋找相同的問題，發現此頁面。我以爲我會後我的解決方案，別人可能會發現它很有用...

@iconpath: '/myicons/'; 

.icon (@icon) { 
    background: no-repeat url('@{iconpath}@{icon}'); 
} 

.icon-foo { .icon('foo.png'); } 
.icon-bar { .icon('bar.png'); } 
.icon-spuds { .icon('spuds.png'); } 

其編譯成（使用http://winless.org/online-less-compiler）

.icon-foo { 
    background: no-repeat url('/myicons/foo.png'); 
} 
.icon-bar { 
    background: no-repeat url('/myicons/bar.png'); 
} 
.icon-spuds { 
    background: no-repeat url('/myicons/spuds.png'); 
} 

Answer 6

相對URL可以通過在命令行編譯器來處理，所謂。您可以在文件觀察器中設置一些類似的選項。

https://github.com/cloudhead/less.js/wiki/Command-Line-Usage

編輯：有完全是。請看：http://lesscss.org/usage/#command-line-usage-options

relativeUrls: true