Stylus implements a superset of various CSS rules, and includes some of its own.


@import can either be used to import CSS or Stylus files. When importing CSS files, the rule works in the regular CSS context. When importing Stylus files, the contents of the included files are parsed and included in the generated CSS file.


The import path is relative to the directory of the file applying the import rule.

Importing a CSS file is done just by using the regular CSS @import rule:

@import "common.css"

If the file extension is .styl or it is omitted, it is assumed to be a Style file, and the content of the included file is rendered in the generated file.

Say, this is the content of special.styl:

  border: 1px solid red

And this, the content ...

Get Express Web Application Development now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.