1.介绍
CSS 预处理预处理框架，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。
2.安装 Stylus
首先，安装 stylus，win+r打开cmd（确保之前已经安装 nodejs ，cmd下输入node -v，回车提示node版本号），-g代表全局安装。
npm install stylus -g
3.获得相关的命令行支持
stylus -h
4.如何将stylus编译成css文件
stylus stylus.styl -o style.css
项目stu目录下新建一个css文件夹用来存放css文件，再新建一个stylus文件夹用来存放stylus文件。
在stylus文件夹下新建test1.styl文件,里面添加（stylus语法代码，来自官网）
border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius 5px
cmd模式下cd到项目stu目录下，执行下面代码编译，编译成功会显示 compiled css\test1.css，在css下生成test1.css
E:\stu>stylus stylus\test1.styl -o css\test1.css
compiled css\test1.css
如果每次修改文件我都要重新输入一下命令行，那岂不是很麻烦。
下面是监听.styl文件的方式
5.如何监听.styl文件有改动后自动编译
stylus stylus.styl -o style.css -w
在这条命令当中只是多出了 -w的字段，他的意思是实时监听，.styl文件每保存一次就编译一次。
同样cmd模式下cd到项目stu目录下，执行下面代码编译，编译成功会显示 compiled css\test1.css，在css下生成test1.css
E:\stu>stylus stylus\test1.styl -o css\test1.css -w watching C:/Users/AppData/Roaming/npm/node_modules/stylus/lib/functions/index.styl compiled css\test1.css watching stylus\test1.styl compiled css\test1.css compiled css\test1.css
6.最后快乐的去学习stylus语法吧
stylus官网：https://stylus-lang.com/
张鑫旭翻译的中文文档：https://www.zhangxinxu.com/jq/stylus/
来源：https://www.cnblogs.com/antao/p/12542095.html