url()
数据 URI 图像内联
Stylus 附带了一个名为 url()
的可选函数,它替换了文字 url()
调用(并且有条件地使用 base64 数据 URI 内联它们)。
示例
该函数本身可通过 require('stylus').url
获得。它接受一个 options
对象,返回 Stylus 在看到 url()
时在内部调用的函数。
.define(name, callback)
方法分配了一个可从 Stylus 源调用的 JavaScript 函数。在本例中,由于我们的图像位于 ./css/images
中,我们可以忽略 paths
选项(默认情况下,图像查找相对于正在渲染的文件执行)。但如果需要,可以更改此行为
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
传递给我们的公共目录,以便它成为查找过程的一部分。
同样,如果我们希望使用 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
});
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");
}
.embed-with-utf8 {
background-image: embedurl("circle.svg", "utf8");
}
将生成 utf 编码的内联 SVG,而不是 base64 编码的 SVG。
如果您希望使用 JS 定义,以便在 utf 编码旁边使用 paths
,则需要使用另一个名称(而不是 url()
)进行定义。这是由于 Stylus 中解析 url()
函数的方式:现在不可能向其传递额外的参数,因此您不能只使用第二个参数调用 url
来设置编码。但如果您使用另一个名称定义 url
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
});
然后你可以使用 inline-url
bif,就像使用 embedurl
一样,但增加了 paths
功能
.embed-with-utf8-at-path {
background-image: inline-url("tobi.svg", "utf8");
}
.embed-with-utf8-at-path {
background-image: inline-url("tobi.svg", "utf8");
}
选项
limit
字节大小限制,默认为 30Kb (30000),使用false
禁用限制paths
图像分辨率路径