javascript - 如何将变量用于具有较少混合的图像路径

Question

我是 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);

希望这是有道理的，谢谢。

Answer 1

卢克和奥姆都在做某事。如何声明变量可能会产生很大的不同。这样做似乎对我有用：

@myImgPathVariable: ~'https://developers.google.com/images/developers-logo.png';

div {
    .at2x(@myImgPathVariable, 200px, 48px);
}

完整示例：http: //jsfiddle.net/jstam/yUtxp/

Answer 2

/* did you try without quotes? */

  .at2x(@myImgPathVariable, 150px, 64px);