有没有办法为LESS文件设置公共图像路径？

Question

我使用的是LESS样式语言.

考虑以下CSS:

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

现在我的所有图像都在../img/我希望能够将变量设置为图像路径的文件夹中,并像这样使用它:

@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

解决方案:

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

Answer 3

我正在寻找同样的问题并找到了这个页面.以为我会发布我的解决方案,因为其他人可能觉得它很有用......

@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 4

Anton Strogonoff的答案很好,但要注意问题@ 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 5

以下是使用LESS处理图像路径的更新且干净的方法:

从您的变量开始:

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

然后像这样使用它:

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

确保@imagePath变量指向图像文件夹,无论您拥有已编译的CSS,都可以从您拥有LESS文件的位置指向.此外,您必须转义变量中的地址,如上例所示,以确保它不会被less.js重写.