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')