stylus富于表现力、动态的、健壮的 CSS

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 est1.css，在css下生成test1.css

E:stu>stylus stylus	est1.styl -o css	est1.css

 compiled css	est1.css

如果每次修改文件我都要重新输入一下命令行，那岂不是很麻烦。

下面是监听.styl文件的方式

5.如何监听.styl文件有改动后自动编译

stylus stylus.styl -o style.css -w

在这条命令当中只是多出了 -w的字段，他的意思是实时监听，.styl文件每保存一次就编译一次。

同样cmd模式下cd到项目stu目录下，执行下面代码编译，编译成功会显示 compiled css est1.css，在css下生成test1.css

E:stu>stylus stylus	est1.styl -o css	est1.css -w
  watching C:/Users/AppData/Roaming/npm/node_modules/stylus/lib/functions/index.styl
  compiled css	est1.css
  watching stylus	est1.styl
  compiled css	est1.css
  compiled css	est1.css

6.最后快乐的去学习stylus语法吧

stylus官网：https://stylus-lang.com/

张鑫旭翻译的中文文档：https://www.zhangxinxu.com/jq/stylus/

参考文档：https://blog.csdn.net/qq_42876835/article/details/102839176?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task