Stylus预处理器简介(二十三)执行文件

执行文件

Stylus附带了用于将Stylus转换为CSS的Stylus可执行文件。

 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 --compress < some.styl > some.css

在终端上试试触控笔吧!为EOF输入下面的内容并按CTRL-D:

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

编译文件的例子

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

 $ stylus css

下面的内容将输出到./public/stylesheets:

 $ stylus css --out public/stylesheets

或者几个文件:

  $ stylus one.styl two.styl

出于开发目的，您可以使用linenos选项来发出指示生成的CSS中Stylus文件名和行号的注释:

  $ stylus --line-numbers <path>

或者firebug选项，如果你想使用FireStylus扩展firebug:

$ stylus --firebug <path>

前缀类

Stylus可执行文件提供了一种方法，使用给定的[prefix]和——prefix选项为所有生成的样式添加前缀，

$ stylus --prefix foo-

与下面的代码一起使用:

.bar
  width: 10px

编译为：

.foo-bar {
  width: 10px;
}

所有的类都有前缀:内插的，扩展的等等。

CSS转换

如果您希望将CSS转换为简洁的Stylus语法，请使用——CSS标志。
通过它的:

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

输出一个相同基名的.styl文件:

$ stylus --css test.css

输出到特定目的地:

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

CSS属性帮助

在OS X上，手写笔帮助<prop>将打开默认浏览器并显示给定的<prop>的帮助文档。

$ stylus help box-shadow

交互式Shell

Stylus REPL (Read-Eval-Print-Loop)或“交互式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)

解析导入中的相对url

默认情况下，Stylus不会解析导入的. style文件中的url，所以如果你碰巧有一个foo。样式与@import "bar/bar。样式，它将有url("baz.png")，它将是url("baz.png")在结果的CSS。
但是你可以通过使用——resolve-url(或-r)选项来改变这种行为，在你的CSS中获得url("bar/baz.png")。

依赖关系列表

您可以使用--deps(或只使用-D)标志来获取编译文件的依赖项列表。
例如，假设我们有test. style:

@import 'foo'
@import 'bar'

和内部foo.styl:

@import 'baz'

运行

$ stylus --deps test.styl

将给出导入路径列表:

foo.styl
baz.styl
bar.styl

注意，目前这对动态生成的路径不起作用。

利用插件

在本例中，我们将使用nib Stylus插件来说明它的CLI用法。
假设我们有以下Stylus，它导入nib以使用其linear-gradient()函数。

 @import 'nib'

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

我们第一次尝试通过stdio使用stylus(1)渲染可能是这样的:

 $ stylus < test.styl

这将产生以下错误(因为Stylus不知道在哪里找到nib)。

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

对于只提供Stylus api的插件，我们可以将路径添加到Stylus查找路径中。我们可以使用——include或-I标志:

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

现在输出如下所示。(您可能注意到，调用gradient-data-uri()和create-gradient-image()输出为文字。这是因为当插件提供JavaScript API时，仅公开库路径是不够的。但是，如果我们只想使用纯手写笔的笔尖功能，我们就可以了。)

  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%);
  }

我们需要做的是使用-use或-u标志。它需要一个节点模块的路径(有或没有.js扩展名)。require()是模块，期望函数被导出为模块。Exports，然后调用style.use(fn())来暴露插件(定义它的js函数等)。

$ 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%);
}

如果你需要传递参数给插件，使用——with选项。with计算任何有效的javascript表达式并将其值传递给插件。例如:

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