html引入stylus,stylus 导入(@import)
本文是《CSS框架》系列文章第 32篇 (共 41 篇)导入
Stylus支持字面@import CSS, 也支持其他Stylus样式的动态导入。
字面CSS
任何.css扩展的文件名将作为字面量。例如：
@import "reset.css"
渲染如下：
@import "reset.css"
Stylus导入
当使用@import没有.css扩展，会被认为是Stylus片段(如：@import "mixins/border-radius")。
@import工作原理为：遍历目录队列，并检查任意目录中是否有该文件(类似node的require.paths)。该队列默认为单一路径，从filename选项的dirname衍生而来。
因此，如果你的文件名是/tmp/testing/stylus/main.styl，导入将显现为/tmp/testing/stylus/。
@import也支持索引形式。这意味着当你@import blueprint, 则会理解成blueprint.styl或blueprint/index.styl.
对于库而言，这很有用，既可以展示所有特征与功能，同时又能导入特征子集。
如下很常见的库结构：
./tablet
|-- index.styl
|-- vendor.styl
|-- buttons.styl
|-- images.styl
下面这个例子中，我们设置paths选项用来为Stylus提供额外路径。在./test.styl中，我们可以@import "mixins/border-radius"或@import "border-radius"(因为./mixins暴露给了Stylus)。
/**
* 依赖模块
*/
var stylus = require('../')
, str = require('fs').readFileSync(__dirname + '/test.styl', 'utf8');
var paths = [
__dirname
, __dirname + '/mixins'
];
stylus(str)
.set('filename', __dirname + '/test.styl')
.set('paths', paths)
.render(function(err, css){
if (err) throw err;
console.log(css);
});
JavaScript导入API
当使用.import(path)方法，这些导入是被推迟的，直到赋值。
var stylus = require('../')
, str = require('fs').readFileSync(__dirname + '/test.styl', 'utf8');
stylus(str)
.set('filename', __dirname + '/test.styl')
.import('mixins/vendor')
.render(function(err, css){
if (err) throw err;
console.log(css);
});
下面语句：
@import 'mixins/vendor'
等同于：
.import('mixins/vendor')