Question

我正在尝试为视网膜图像编写透明的背景图像mixin，但是，我被卡住了，因为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：期望的字符串，标识或文字，但得到了调用：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（）调用转换为string

1 个答案: