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的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 5

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

从变量开始：

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

然后像这样使用它：

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

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

Answer 6

相应的url可以由命令行编译器处理。您可以在文件观察器中设置一些类似的选项。

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

编辑：完全有。看看：http://lesscss.org/usage/#command-line-usage-options

relativeUrls: true

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

6 个答案: