stylus中文版参考文档之函数之url()
回到相关文章 »文档:
- 选择器(Selectors)
- 变量(Variables)
- 插值(Interpolation)
- 运算符(Operators)
- 混合书写(Mixins)
- 方法(Functions)
- 关键字参数(Keyword Arguments)
- 内置方法(Built-in Functions)
- 其余参数(Rest Params)
- 注释(Comments)
- 条件(Conditionals)
- 迭代(Iteration)
- @import
- @media
- @font-face
- @keyframes
- @extend
- url()
- CSS字面量(CSS Literal)
- CSS样式解析(CSS Style Syntax)
- 字符转码(Char Escaping)
- 可执行性(Executable)
- 错误报告(Error Reporting)
- 连接中间件(Connect Middleware)
- 自检API(Introspection API)
- JavaScript API
- Nib下CSS扩展(CSS3 Extensions with Nib)
- Stylus在线体验!
详细:
函数之url()
内联Data URI图像
Stylus捆绑了一个可选函数,名叫url()
,其替换了字面上的url()
调用(且使用base64 Data URIs有条件地内联它们)。
示例
通过require('stylus').url
该函数本身是可用的,其接受一个options
对象,当看到url()
时候,返回Stylus内部调用的函数。
.define(name, callback)
方法指定了一个可被调用的JavaScript函数。在这种情况下,因为我们图片在./css/images
中,我们可以忽视paths
选项(默认情况下,会查找相关要呈现的图像文件)。如果愿意,该行为时可以改变的。
stylus(str) .set('filename', __dirname + '/css/test.styl') .define('url', stylus.url()) .render(function(err, css){ });
例如,想象图片在./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){ });
选项(Options)
limit
大小默认限制30Kb(30000)paths
图像解析路径