Stylus是一款需要编译的css语言，所以其本身文件不能被html直接调用，需要要编译为css文件后再进行日常的加载。
stylus是一款优秀的css编译语言，需要node.js支持，第一步需要安装node.js
１
# apt-get update # apt-get install -y python-software-properties software-properties-common # add-apt-repository ppa:chris-lea/node.js # apt-get update # apt-get install nodejs
2 node - v 查看node版本信息如果有返回信息则安装成功
3 安装stylus
# npm install stylus
4 调试Stylus （Ctrl+D）
# styusborder-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius(5px)
看看是否会返回
body { font: 12px Helvetica, Arial, sans-serif;}a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}5 styus文件的编译
创建一个test.styl 的文件，文件内容如下：
1 border-radius() 2 -webkit-border-radius arguments 3 -moz-border-radius arguments 4 border-radius arguments 5 6 body 7 font 12px Helvetica, Arial, sans-serif 8 9 a.button10 border-radius 5px
保存关闭，在命令行运行如下命令：
# stylus --compress < test.styl > test.css
看看是不是获得一个test.css的文件，看看内容是否如下：
1 body{2 font:12px Helvetica,Arial,sans-serif3 }4 a.button{5 -webkit-border-radius:5px;6 -moz-border-radius:5px;7 border-radius:5px8 }这样一个stylus的文件就被编译成了html可以调用的css文件了。
附录：
编译文件范例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选项，如果你想使用firebug的FireStylus扩展。
$ stylus --firebug <path>
如果你想把CSS转换成简洁的Stylus语法，可以使用--css标志。
通过标准输入输出：
$ stylus --css < test.css > test.styl
输出基本名一致的.styl文件。
$ stylus --css test.css
输出特定的目标：
$ stylus --css test.css /tmp/out.styl
在OS X上，stylus help
$ stylus help box-shadow
Stylus REPL (Read-Eval-Print-Loop)或“壳层交互(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)
本例我们将使用nibStylus插件来说明它的CLI使用。
假设我们有如下的Stylus, 其导入nib并使用nib的linear-gradient()方法：
@import 'nib'body background: linear-gradient(20px top, white, black)
我们是使用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们的插件，我们可以添加查找路径。通过使用--include或-I标志：
$ 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%);}因此，我们需要做的是使用--use或-u标志。其会找寻node模块（有或者没有.js扩展名）路径，这里的require()模块或调用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%);}
Einführung in das von vscode verwendete Framework
Warum kann ich die letzte leere Seite in Word nicht löschen?
So teilen Sie einen Drucker zwischen zwei Computern
Formelle Handelsplattform für digitale Währungen
So funktioniert der Temperatursensor
Lösung für keinen Ton im Win7-System
So beheben Sie 500 interne Serverfehler
Mobiltelefon-Zweitkarte
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
