我是Less的新手,我试图在可能的情况下使用http://retinajs.com/加载视网膜图像。
脚本在CSS中调用图像时可以使用以下mixin:
.at2x(@path, @w: auto, @h: auto) {
background-image: url(@path);
@at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
@media all and (-webkit-min-device-pixel-ratio : 1.5) {
background-image: url(@at2x_path);
background-size: @w @h;
}
}
我的问题是,如果我在一张图片中使用了变量,如何正确使用该变量在mixin中工作。
做这样的事情不起作用:
.at2x('@myImgPathVariable', 150px, 64px);
这也不是:
.at2x('("@{myImgPathVariable}/logo.png")', 150px, 64px);
希望这有意义,谢谢。
最佳答案
卢克(Luke)和奥姆(Om)都在努力。变量的声明方式可能会有很大的不同。这样做似乎对我有用:
@myImgPathVariable: ~'https://developers.google.com/images/developers-logo.png';
div {
.at2x(@myImgPathVariable, 200px, 48px);
}
完整示例:http://jsfiddle.net/jstam/yUtxp/