中文
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'] }"