Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Started @import docs. Closes #88

  • Loading branch information...
commit 337118ab6ae0d9c54ed0807f654e7142d84050d7 1 parent 37cfb95
TJ Holowaychuk tj authored
Showing with 51 additions and 0 deletions.
  1. +1 −0  Readme.md
  2. +43 −0 docs/import.md
  3. +7 −0 docs/js.md
1  Readme.md
View
@@ -42,6 +42,7 @@ compiles to:
- [mixins](stylus/blob/master/docs/mixins.md)
- [variables](stylus/blob/master/docs/variables.md)
- arithmetic, logical, and equality [operators](stylus/blob/master/docs/operators.md)
+ - [importing](stylus/blob/master/docs/import.md) of other stylus sheets
- type coercion
- [conditionals](stylus/blob/master/docs/conditionals.md)
- nested [selectors](stylus/blob/master/docs/selectors.md)
43 docs/import.md
View
@@ -0,0 +1,43 @@
+
+## 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:
+
+ @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);
+ });
7 docs/js.md
View
@@ -19,6 +19,13 @@ We can also do the same thing in a more progressive manner:
// logic
});
+## .set(setting, value)
+
+ Apply a setting such as a `filename`, or import `paths`:
+
+ .set('filename', __dirname + '/test.styl')
+ .set('paths', [__dirname, __dirname + '/mixins'])
+
## .define(name, fn)
This method allows you to provide a JavaScript-defined function to Stylus, think of these as you would JavaScript to C++ bindings. When you have something you cannot do within Stylus, you define it in JavaScript.
Please sign in to comment.
Something went wrong with that request. Please try again.