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