将 url() 调用转换为字符串

Question

我正在尝试为视网膜图像编写透明背景图像混合，但是，我被卡住了，因为 Stylus 将 url() 视为调用并且不允许任何字符串操作。

mixin 的基础：

background-image($file, $retina = false)
  if $retina == "2x"
    $path = pathjoin(dirname($file), basename($file, extname($file)) + '@2x' + extname($file))
    background-image: unquote($path)
  else
    background-image: $file

这意味着这有效

.foo {
  background-image: "url(img/man-with-tablet.jpg)" 2x;
}

但我想要干净的 CSS 语法：

.foo {
  background-image: url(img/man-with-tablet.jpg) 2x;
}

这会导致错误 TypeError：预期的字符串、标识或文字，但得到 call:url(img / man-with-tablet .jpg)

有什么方法可以将 $file 从 url() 调用转换为字符串？谢谢！

Answer 1

您可以将此调用强制转换为字符串（通过将其与 '' 连接）。但在这种情况下，您需要将 url() 调用的参数用引号引起来。

background-image($file, $retina = false)
  if $retina == "2x"
    $file = '' + $file
    $path = pathjoin(dirname($file), basename($file, extname($file)) + '@2x' + extname($file))
    background-image: unquote($path)
  else
    background-image: $file

.foo {
  background-image: url('img/man-with-tablet.jpg') 2x;
}

将 url() 调用转换为字符串

Convert url() call to string

stylus