Get styling with Stylus

Installing Stylus is very easy once you have Node.js. So get the binaries for your platform and make sure that they also include npm, Node's package manager.

Now, type in your terminal:

# npm
$ npm install stylus -g

# pnpm
$ pnpm add -g stylus

# npm
$ npm install stylus -g

# pnpm
$ pnpm add -g stylus

If you want an expressive css language for nodejs with these features or the features listed below, head over to GitHub for more information.

命令行工具(Stylus cli)

正因有stylus命令行工具，Stylus才能将自身转换成CSS。

Usage: stylus [options] [command] [< in [> out]]
              [file|dir ...]

Commands:

  help [<type>:]<prop> Opens help info at MDC for <prop> in
                        your default browser. Optionally
                        searches other resources of <type>:
                        safari opera w3c ms caniuse quirksmode

Options:

  -i, --interactive       Start interactive REPL
  -u, --use <path>        Utilize the Stylus plugin at <path>
  -U, --inline            Utilize image inlining via data URI support
  -w, --watch             Watch file(s) for changes and re-compile
  -o, --out <dir>         Output to <dir> when passing files
  -C, --css <src> [dest]  Convert CSS input to Stylus
  -I, --include <path>    Add <path> to lookup paths
  -c, --compress          Compress CSS output
  -d, --compare           Display input along with output
  -f, --firebug           Emits debug infos in the generated CSS that
                          can be used by the FireStylus Firebug plugin
  -l, --line-numbers      Emits comments in the generated CSS
                          indicating the corresponding Stylus line
  -m, --sourcemap         Generates a sourcemap in sourcemaps v3 format
  --sourcemap-inline      Inlines sourcemap with full source text in base64 format
  --sourcemap-root <url>  "sourceRoot" property of the generated sourcemap
  --sourcemap-base <path> Base <path> from which sourcemap and all sources are relative
  -P, --prefix [prefix]   Prefix all css classes
  -p, --print             Print out the compiled CSS
  --import <file>         Import stylus <file>
  --include-css           Include regular CSS on @import
  -D, --deps              Display dependencies of the compiled file
  --disable-cache         Disable caching
  --hoist-atrules         Move @import and @charset to the top
  -r, --resolve-url       Resolve relative urls inside imports
  --resolve-url-nocheck   Like --resolve-url but without file existence check
  -V, --version           Display the version of Stylus
  -h, --help              Display help information

Usage: stylus [options] [command] [< in [> out]]
              [file|dir ...]

Commands:

  help [<type>:]<prop> Opens help info at MDC for <prop> in
                        your default browser. Optionally
                        searches other resources of <type>:
                        safari opera w3c ms caniuse quirksmode

Options:

  -i, --interactive       Start interactive REPL
  -u, --use <path>        Utilize the Stylus plugin at <path>
  -U, --inline            Utilize image inlining via data URI support
  -w, --watch             Watch file(s) for changes and re-compile
  -o, --out <dir>         Output to <dir> when passing files
  -C, --css <src> [dest]  Convert CSS input to Stylus
  -I, --include <path>    Add <path> to lookup paths
  -c, --compress          Compress CSS output
  -d, --compare           Display input along with output
  -f, --firebug           Emits debug infos in the generated CSS that
                          can be used by the FireStylus Firebug plugin
  -l, --line-numbers      Emits comments in the generated CSS
                          indicating the corresponding Stylus line
  -m, --sourcemap         Generates a sourcemap in sourcemaps v3 format
  --sourcemap-inline      Inlines sourcemap with full source text in base64 format
  --sourcemap-root <url>  "sourceRoot" property of the generated sourcemap
  --sourcemap-base <path> Base <path> from which sourcemap and all sources are relative
  -P, --prefix [prefix]   Prefix all css classes
  -p, --print             Print out the compiled CSS
  --import <file>         Import stylus <file>
  --include-css           Include regular CSS on @import
  -D, --deps              Display dependencies of the compiled file
  --disable-cache         Disable caching
  --hoist-atrules         Move @import and @charset to the top
  -r, --resolve-url       Resolve relative urls inside imports
  --resolve-url-nocheck   Like --resolve-url but without file existence check
  -V, --version           Display the version of Stylus
  -h, --help              Display help information

STDIO编译范例

stylus 读取自 stdin 输出到 stdout , 因此，如下例:

$ stylus --compress < some.styl > some.css

$ stylus --compress < some.styl > some.css

在终端机上尝试Stylus，书写下面的内容，然后为__EOF__按下CTRL-D：

$ stylus
body
  color red
  font 14px Arial, sans-serif

$ stylus
body
  color red
  font 14px Arial, sans-serif

编译文件范例

stylus亦接受文件和目录。例如，一个目录名为css将在同一目录编译并输出.css文件。

$ stylus css

$ stylus css

The following will output to ./public/stylesheets:

$ stylus css --out public/stylesheets

$ stylus css --out public/stylesheets

多个文件:

$ stylus one.styl two.styl

$ stylus one.styl two.styl

为了开发的目的，你可以使用linenos选项发出指令在生成的CSS中显示Stylus文件名以及行数。

$ stylus --line-numbers <path>

$ stylus --line-numbers <path>

或是firebug选项，如果你想使用firebug的FireStylus扩展。

$ stylus --firebug <path>

$ stylus --firebug <path>

Prefixing classes

stylus executable provides you a way to prefix all the generated styles using --prefix option with given [prefix],

$ stylus --prefix foo-

$ stylus --prefix foo-

used with this code:

.bar
  width: 10px

.bar
  width: 10px

would yield

.foo-bar {
  width: 10px;
}

.foo-bar {
  width: 10px;
}

All the classes would be prefixed: interpolated, extended etc.

转化 CSS

如果你想把CSS转换成简洁的Stylus语法，可以使用--css选项。

通过标准输入输出:

$ stylus --css < test.css > test.styl

$ stylus --css < test.css > test.styl

输出基本名一致的.styl文件:

$ stylus --css test.css

$ stylus --css test.css

指定输出文件名:

$ stylus --css test.css /tmp/out.styl

$ stylus --css test.css /tmp/out.styl

CSS属性的帮助

在OS X上，stylus help <prop>会打开你默认浏览器并显示给定的<prop>属性的帮助文档。

$ stylus help box-shadow

$ stylus help box-shadow

交互shell(Interactive Shell)

Stylus REPL (Read-Eval-Print-Loop)或“交互shell(Interactive Shell)”允许你直接在终端机上把玩Stylus的表达式。

**注意只有表达式可以生效，**而不是选择器之类。为了简单，我们添加-i或--interactive选项

$ stylus -i
> color = white
=> #fff
> color - rgb(200,50,0)
=> #37cdff
> color
=> #fff
> color -= rgb(200,50,0)
=> #37cdff
> color
=> #37cdff
> rgba(color, 0.5)
=> rgba(55,205,255,0.5)

$ stylus -i
> color = white
=> #fff
> color - rgb(200,50,0)
=> #37cdff
> color
=> #fff
> color -= rgb(200,50,0)
=> #37cdff
> color
=> #37cdff
> rgba(color, 0.5)
=> rgba(55,205,255,0.5)

Resolving relative urls inside imports

By default Stylus don't resolve the urls in imported .styl files, so if you'd happen to have a foo.styl with @import "bar/bar.styl" which would have url("baz.png"), it would be url("baz.png") too in a resulting CSS.

But you can alter this behavior by using --resolve-url (or just -r) option to get url("bar/baz.png") in your resulting CSS.

List dependencies

You can use --deps (or just -D) flag to get a list of dependencies of the compiled file.

For example, suppose we have test.styl:

@import 'foo'
@import 'bar'

@import 'foo'
@import 'bar'

And inside foo.styl:

@import 'baz'

@import 'baz'

Running:

$ stylus --deps test.styl

$ stylus --deps test.styl

Will give us list of the imports paths:

foo.styl
baz.styl
bar.styl

foo.styl
baz.styl
bar.styl

Note that currently this does not works for dynamically generated paths.

使用 Plugins

本例我们将使用nib Stylus插件来说明它的CLI使用。

假设我们有如下的Stylus, 其导入nib并使用nib的linear-gradient()方法：

@import 'nib'

body
  background: linear-gradient(20px top, white, black)

@import 'nib'

body
  background: linear-gradient(20px top, white, black)

我们是使用stylus(1)通过标准输入输出试图渲染的第一个东西可能就像下面这样：

$ stylus < test.styl

$ stylus < test.styl

这可能会生成如下的错误，因为Stylus不知道去哪里找到nib.

Error: stdin:3
  1|
  2|
> 3| @import 'nib'
  4|
  5| body
  6|   background: linear-gradient(20px top, white, black)

Error: stdin:3
  1|
  2|
> 3| @import 'nib'
  4|
  5| body
  6|   background: linear-gradient(20px top, white, black)

对于简单应用Stylus API们的插件，我们可以添加查找路径。通过使用--include或-I标志:

$ stylus < test.styl --include ../nib/lib

$ stylus < test.styl --include ../nib/lib

现在生成内容如下。您可能注意到了，gradient-data-uri()以及create-gradient-image()以字面量形式输出了。这是因为，当插件提供JavaScript API的时候，光暴露插件的路径是不够的。但是，如果我们仅仅想要的是纯粹Stylus nib函数，则足够了。

body {
  background: url(gradient-data-uri(create-gradient-image(20px, top)));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
  background: -moz-linear-gradient(top, #fff 0%, #000 100%);
  background: linear-gradient(top, #fff 0%, #000 100%);
}

body {
  background: url(gradient-data-uri(create-gradient-image(20px, top)));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
  background: -moz-linear-gradient(top, #fff 0%, #000 100%);
  background: linear-gradient(top, #fff 0%, #000 100%);
}

So, what we need to do is use the --use, or -u flag. It expects a path to a node module (with or without the .js extension). This require()s the module, expecting a function to be exported as module.exports, which then calls style.use(fn()) to expose the plugin (defining its js functions, etc.).

$ stylus < test.styl --use ../nib/lib/nib

$ stylus < test.styl --use ../nib/lib/nib

将产生我们期望的结果:

body {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAABmJLR0QA/wD/AP+gvaeTAAAAI0lEQVQImWP4+fPnf6bPnz8zMH358oUBwkIjKJBgYGNj+w8Aphk4blt0EcMAAAAASUVORK5CYII=");
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
  background: -moz-linear-gradient(top, #fff 0%, #000 100%);
  background: linear-gradient(top, #fff 0%, #000 100%);
}

body {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAABmJLR0QA/wD/AP+gvaeTAAAAI0lEQVQImWP4+fPnf6bPnz8zMH358oUBwkIjKJBgYGNj+w8Aphk4blt0EcMAAAAASUVORK5CYII=");
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
  background: -moz-linear-gradient(top, #fff 0%, #000 100%);
  background: linear-gradient(top, #fff 0%, #000 100%);
}

If you need to pass arguments to the plugin, use the --with option. --with evaluates any valid javascript expression and passes its value to the plugin. For example:

$ stylus < test.styl --use ../node_modules/autoprefixer-stylus --with "{ browsers: ['ie 7', 'ie 8'] }"

$ stylus < test.styl --use ../node_modules/autoprefixer-stylus --with "{ browsers: ['ie 7', 'ie 8'] }"

Get styling with Stylus #

命令行工具(Stylus cli) #

STDIO编译范例 #

编译文件范例 #

Prefixing classes #

转化 CSS #

CSS属性的帮助 #

交互shell(Interactive Shell) #

Resolving relative urls inside imports #

List dependencies #

使用 Plugins #