url() #

数据 URI 图片内联 #

¥Data URI Image Inlining

Stylus 与一个名为 url() 的可选函数打包在一起，该函数替换了字面量 url() 调用（并使用 base64 数据 URI 有条件地内联它们）。

¥Stylus is bundled with an optional function named url(), which replaces the literal url() calls (and conditionally inlines them using base64 Data URIs).

示例 #

¥Example

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

¥The function itself is available via require('stylus').url. It accepts an options object, returning a function that Stylus calls internally when it sees url().

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

¥The .define(name, callback) method assigned a JavaScript function that can be called from Stylus source. In this case, since our images are in ./css/images, we can ignore the paths option (by default image lookups are performed relative to the file being rendered). But if desired, this behavior can be altered:

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

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 传递给我们的公共目录，以便它成为查找过程的一部分。

¥For example, imagine our images live in ./public/images. We want to use url(images/tobi.png). We could pass paths our public directory, so that it becomes part of the lookup process.

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

¥Likewise, if instead we wanted url(tobi.png), we could pass 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
  });

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

SVG 的 utf8 编码 #

¥utf8 encoding for SVGs

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

¥Since base64 encoding an image actually increases the original size, you have the option to use utf8 encoding when inlining SVGs.

为此有一个 bif：embedurl：

¥There is a bif for this: embedurl:

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

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

将生成 utf 编码的内联 SVG，而不是 base64 编码的 SVG。

¥Would result in utf-encoded inline SVG instead of base64 one.

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

¥If you'd like to use the JS define so you could use the paths alongside the utf encoding, you'll need to define it using another name, not url(). This is Due to how url() function is parsed in Stylus: it is impossible now to pass the extra param to it, so you couldn't just call url with the second param to set the encoding. But if you'd define the url with another name:

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

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 功能：

¥You could then use inline-url bif just like you can use embedurl, but with an added paths functionality:

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

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

选项 #

¥Options

• limit 字节大小限制默认为 30Kb (30000)，使用 false 禁用该限制

  ¥limit bytesize limit defaulting to 30Kb (30000), use false to disable the limit

• paths 图片解析路径

  ¥paths image resolution path(s)