共计 2097 个字符，预计需要花费 6 分钟才能阅读完成。
最近沉迷学习（其实大部分时间都在看英雄联盟 S8 总决赛），把这几天在学的 Stylus 做个总结。这篇文章对学习 Stylus 的新手来说应该会有帮助~ 为了让大家代码观赏性更好，这里的代码都以截图的方式呈现，用的 IDE 是 VSCode。
介绍
Stylus 是个非常优秀的 CSS 预编译器，算是前端工作流的新宠。写起来十分简洁！究竟有多简洁呢，请看图 左边是 Stylus 的写法，右边是原生 CSS 的写法 不需要写分号！！不需要写冒号！！甚至连花括号都可以省略！！！只需要简单的缩进即可，对比手写原生 CSS 代码简直 …
安装
你可以使用 yarn 来安装（推荐）(不知道 yarn 的小伙伴可以看我之前写的关于 yarn 用法的文章~ https://juejin.im/post/5bbb1b…)
yarn global add stylus
也可以使用 npm 来安装
npm install stylus -g
安装好了后就可以使用 stylus 的命令来编译生成 css 文件
用法
命令
stylus 基本编译命令
stylus xxx.styl -o xxx.css //xxx 是你创建的文件名 -o 的意思是 -out 输出 css 文件
例如：这是我的文件目录，首先创建 stylus 文件，文件名可以随便取，我这里叫 style，文件后缀必须以 .styl 结尾文件里的内容编写方式类似于 css 写法，但可以省略冒号，分号，花括号，足够简洁然后在该文件目录下打开控制台 (终端) 输入 stylus 命令你会发现 stylus 自动帮我们在本目录下编译并生成好了 style.css 文件然后打开这个 style.css 文件，会发现格式什么的都帮我们自动补齐了是不是很方便~ <font color=’red’> 值得注意的是，在我们编写 stylus 文件的时候，一定要注意缩进，因为 stylus 就是根据缩进来识别选择器层级和对应 css 样式规则的 </font> 比如让我们再使用 stylus 编译一次会发现生成的 css 文件乱七八糟，各种报错！所以在编写 stylus 文件的时候一定要注意缩进
有没有发现每修改一次 stylus 文件就要再输入一次 stylus 命令进行重新编译，这样对于我们开发者来说极大的不便。所以 stylus 提供了解决的方法，就是在原有基础上加上 -w
stylus -w xxx.styl -o xxx.css // 在原有的基础上加了 -w w 的意思是 watch，也就是监听
这样就可以实时监听修改，并实时编译。当我们修改 stylus 文件时 (修改完记得保存 Ctrl+S) 可以看到控制台实时帮我们重新编译了然后我们再看看 css 文件这样就达到了实时监控，这也是我们现代前端工作流中需要的，实时监控更新。
选择器
缩进
开始也说了，stylus 的缩进有很重要的意义，stylus 就是根据缩进来区别选择器和 CSS 样式，所以写完选择器后，下一行务必注意缩进
逗号
Stylus 就和 CSS 一样，允许你使用逗号为多个选择器同时定义属性。也可以省去逗号，一个选择器占一行写，可以达到同样的效果
嵌套
stylus 支持嵌套语法，相当于后代选择器
父级引用
父级引用简单来说就是：与父级的选择器作拼接。语法是在嵌套的选择器前加一个 & 字符，我们直接看例子吧
1. 实现交集选择器的使用
2. 实现伪元素的使用
变量
在 Stylus 中，可以定义变量存储经常使用的数据，然后在我们的样式中贯穿使用。定义变量的方法也巨简单，直接使用 变量名 = 变量值 的形式
bgc = green
fz = 10px
…
建议把变量统一在最上面声明赋值当然你也可以标识符来定义变量 Stylus 支持 $ 符号来定义变量，如果你学过 Sass 的话应该会很有亲切感变量甚至可以互相引用，组成一个表达式列表属性查找 Stylus 有另外一个很酷的独特功能，不需要分配值给变量就可以定义引用属性。下面是个很好的例子，元素水平垂直居中对齐（典型的方法是使用百分比和 margin 负值）我们甚至可以不使用这里的变量 w 和 h, 而是简单地前置 @字符在属性名前来访问该属性名对应的值 也就是说 @+ 属性名可以当做变量使用变量的向上冒泡查找
混合
混合可以类似于代码块，可以进行代码的复用，例如你也可以在混合中写 CSS 样式规则进行复用总结来说就是在混合中书写一些常用的代码块，进行复用，可以少些很多的代码！
方法（函数）
Stylus 强大之处就在于其内置的语言函数定义。其定义与混合 (mixins) 一致，不同的是混合是引用是直接复用代码块，而函数引用则是将返回值返回。举个简单的例子函数的默认参数 Stylus 还可以支持多个返回值，这个很强！我们还可以把函数当作参数传递到新的函数中
注释
聊聊注释吧，单行注释 & 多行注释 单行注释多行注释
引入
sylus 还可以引入外部的 stylus 文件
总结
CSS 预处理器用法其实都很类似，无非就是给 CSS 赋予了可编程的能力，包括一些变量、函数、运算符和 if-else 等等的操作。如果想更加深入的了解 Stylus，推荐大家去看张鑫旭大大的 Stylus 文章。https://www.zhangxinxu.com/jq… 这里只是列出了平时常用的用法，在实战中足够解决大部分问题。希望可以给大家点帮助，要是觉得这篇文章不错的话，可以点赞支持下谢谢！
