url()

数据 URI 图像内联

Stylus 随附了一个名为 url() 的可选函数，它替换了字面上的 url() 调用（并有条件地使用 base64 数据 URI 内联它们）。

示例

该函数本身可通过 require('stylus').url 获得。它接受一个 options 对象，返回一个函数，当 Stylus 看到 url() 时，它会在内部调用该函数。

.define(name, callback) 方法分配了一个 JavaScript 函数，可以从 Stylus 源中调用该函数。在这种情况下，由于我们的图像位于 ./css/images 中，我们可以忽略 paths 选项（默认情况下，图像查找是相对于正在呈现的文件执行的）。但是，如果需要，可以更改此行为：

stylus(str)
  .set("filename", __dirname + "/css/test.styl")
  .define("url", stylus.url())
  .render(function (err, css) {
    // render it
  });

例如，假设我们的图像位于 ./public/images 中。我们想要使用 url(images/tobi.png)。我们可以将 paths 传递给我们的公共目录，以便它成为查找过程的一部分。

同样，如果我们想要 url(tobi.png)，我们可以传递 paths: [__dirname + '/public/images']。

stylus(str)
  .set("filename", __dirname + "/css/test.styl")
  .define("url", stylus.url({ paths: [__dirname + "/public"] }))
  .render(function (err, css) {
    // render it
  });

SVG 的 utf8 编码

由于对图像进行 base64 编码实际上会增加原始大小，因此您可以选择在内联 SVG 时使用 utf8 编码。

有一个 bif 用于此：embedurl：

.embed-with-utf8 {
  background-image: embedurl("circle.svg", "utf8");
}

将导致使用 utf 编码的内联 SVG，而不是 base64 编码的内联 SVG。

如果您想使用 JS 定义，以便您可以在 utf 编码旁边使用 paths，则需要使用另一个名称定义它，而不是 url()。这是由于 url() 函数在 Stylus 中的解析方式：现在无法将额外的参数传递给它，因此您无法仅使用第二个参数调用 url 来设置编码。但是，如果您使用另一个名称定义了 url：

stylus(str)
  .set("filename", __dirname + "/css/test.styl")
  .define("inline-url", stylus.url({ paths: [__dirname + "/public"] }))
  .render(function (err, css) {
    // render it
  });

然后，您可以像使用 embedurl 一样使用 inline-url bif，但具有添加的 paths 功能：

.embed-with-utf8-at-path {
  background-image: inline-url("tobi.svg", "utf8");
}

选项

• limit 字节大小限制，默认为 30Kb（30000），使用 false 禁用限制
• paths 图像分辨率路径（路径）