Rules

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

@import

@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.

Note

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:

.special
  border: 1px solid red

And this, the content of style.styl:

@import "special"

When style.css is called, the following will be generated:

.special {
  border: 1px solid #f00;
}

To modularize Stylus imports, we can use indexed directories. In such cases, we just have to mention the name of...