阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Stylus @import

      导入

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