你不知道的Stylus

最近沉迷学习（其实大部分时间都在看英雄联盟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... 这里只是列出了平时经常使用的用法，在实战中足够解决大部分问题。但愿能够给你们点帮助，要是以为这篇文章不错的话，能够点赞支持下谢谢！