我使用的是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;
}
然而,这并不起作用。这不是什么大问题,如果图片文件夹发生了变化,我总是可以使用“查找和替换”。我刚刚开始学到更少的东西,想知道这样的事情是否可能发生。
发布于 2011-06-10 01:14:22
尝试使用字符串插值来做这样的事情。在docs中查找“变量插值”。
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
发布于 2012-06-08 22:32:48
解决方案:
.side-bg
{
background : ~"url( '@{image-path}/layout/side-bg.jpg' )" top no-repeat;
}
发布于 2013-01-05 19:23:08
我正在搜索同样的问题,找到了这个页面。我想我会发布我的解决方案,因为其他人可能会发现它很有用...
@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');
}
https://stackoverflow.com/questions/6294126
复制相似问题