CSS 有没有办法为 LESS 文件设置通用图像路径？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6294126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to set a common image path for LESS files?
提问by JD Isaacks
I am using the LESSstyling language.
我正在使用LESS样式语言。
Consider the following CSS:
考虑以下 CSS：
.side-bg
{
background:url(../img/layout/side-bg.jpg) top no-repeat;
}
Right now all of my images are in the folder ../img/I wanted to be able to set a variable as the image path and use it like so:
现在我所有的图像都在文件夹中，../img/我希望能够将变量设置为图像路径并像这样使用它：
@image-path: ../img;
.side-bg
{
background:url(@image-path/layout/side-bg.jpg) top no-repeat;
}
This does not work however. Its not a huge deal, I could always use find and replaceif the image folder ever changed. I am just starting to learn LESS and was wondering if something like this is possible.
然而这不起作用。这没什么大不了的，如果图像文件夹发生变化，我总是可以使用查找和替换。我刚刚开始学习 LESS，想知道这样的事情是否可能。
回答by Anton Strogonoff
回答by ANBe
The solution:
解决方案：
.side-bg
{
background : ~"url( '@{image-path}/layout/side-bg.jpg' )" top no-repeat;
}
回答by Sean Connelly
I was searching for the same question and found this page. Thought I would post my solution as someone else might find it useful...
我正在搜索相同的问题并找到了这个页面。以为我会发布我的解决方案，因为其他人可能会觉得它有用...
@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'); }
which compiles to (used http://winless.org/online-less-compiler)
编译为（使用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');
}
回答by Shawn C
Anton Strogonoff's answeris good but be aware of the Issue @294:
Anton Strogonoff 的回答很好，但请注意问题 @294：
Using the above which comes straight from the docs, I get url://pathtolessfile/variableI set. Even though I'm trying to set an absolute URL instead of a relative one. For example this works
使用直接来自文档的上述内容，我得到了url://pathtolessfile/variable设置。即使我试图设置一个绝对 URL 而不是相对 URL。例如这有效
@base-url: "../../images/";
@background-image : url ("@{base-url}/bg.png");
But this does not work
但这不起作用
$base-url: "http://localhost/ns/assets/images/";
@background-image : url ("@{base-url}/bg.png";
In the latter example, my final source path becomes
在后一个示例中，我的最终源路径变为
http://localhost/ns/assets/css/libs/http://localhost/ns/assets/images/bg.png
回答by jonschlinkert
Here is an updated and clean way to handle image paths with LESS:
这是使用 LESS 处理图像路径的更新且干净的方法：
Start with your variable:
从你的变量开始：
@imagePath: ~"../images/bg/";
Then use it like this:
然后像这样使用它：
.main-bg {
background: url('@{imagePath}my-background-image.png') repeat scroll left top;
}
Make sure the @imagePathvariable points to the images folder from wherever you have your compiled CSS, NOT from where you have your LESS files. Also, you have to escape the address in the variable as in the example above to ensure that it does not get rewritten by less.js.
确保@imagePath变量从你编译的 CSS 的任何地方指向图像文件夹，而不是你的 LESS 文件。此外，您必须像上面的示例一样对变量中的地址进行转义，以确保它不会被 less.js 重写。
回答by posit labs
Relative urls can be handled by the command line compiler, supposedly. There's probably some similar option you can set in the file watcher.
相对 url 可以由命令行编译器处理，据说。您可以在文件观察器中设置一些类似的选项。
https://github.com/cloudhead/less.js/wiki/Command-Line-Usage
https://github.com/cloudhead/less.js/wiki/Command-Line-Usage
EDIT: There totally is. Just look: http://lesscss.org/usage/#command-line-usage-options
编辑：完全有。看看：http: //lesscss.org/usage/#command-line-usage-options
relativeUrls: true
