Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

65 lines (42 sloc) 2.041 kb

Import

Stylus supports both literal @import for CSS, as well as dynamic importing of other Stylus sheets.

Literal CSS

Any filename with the extension .css will become a literal, for example:

 @import "reset.css"

will render to the literal css @import shown below:

 @import "reset.css"

Stylus Import

When using @import without the .css extension, it is assumed to be a Stylus sheet, for example @import "mixins/border-radius".

@import works by iterating an array of directories, and seeing if this file lives in any of them, similar to node's require.paths. This array defaults to a single path which is derived from the filename option's dirname. So if your filename is /tmp/testing/stylus/main.styl, then import will look in /tmp/testing/stylus/.

In the example below we set the paths options to provide additional paths to Stylus. Within ./test.styl we could then @import "mixins/border-radius" or @import "border-radius" since ./mixins is exposed to Stylus.

  /**
   * Module dependencies.
   */

  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 Import API

When using the .import(path) method, these imports are deferred until evaluation:

   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);
   });

The following are essentially equivalent:

 @import 'mixins/vendor'

and .import('mixins/vendor')

Jump to Line
Something went wrong with that request. Please try again.