炫意html5
最早CSS3和HTML5移动技术网站之一

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.stylblueprint/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')
<< stylus 条件(Conditionals)stylus 方法(Functions) >>

炫意HTML5 » stylus 导入(@import)

CSS3教程HTML5教程