Stylus: 让你更简洁的完成css

介绍

Stylus 是 css 非常优秀的一款预编译器。能够很简洁的实现css需要实现的功能。 究竟有多简洁呢？我们来看下面的代码：

上图使用的IDE是vscode，左边的是stylus代码，右边的是css代码，可以很明显的看到stylus的简洁程度。自从知道了stylus， 发现我已经不想再手写css格式的代码了！！！

安装

安装stylus前需要确保已经安装nodejs哦~ 在vocode终端输入如下命令即可

npm i -g stylus

验证是否安装成功 可以输入如下命令

stylus --version

如图所示 可以看到stylus的版本号

简单使用

安装完成之后就可以按照如下步骤进行操作

1. 首先在文件夹创建一个styl的文件夹，如下图:

2. 接着就可以在这个文件里面写stylus代码了。代码格式就如上面介绍的一样，不需要冒号，不需要分号，更不需要花括号！

3. 接着将styl 文件转换为css文件，使用如下语法：

stylus xx.styl -o xx.css   
// xx.styl是你创建styl的文件，-o 是 out 输出，xx.css 是你输出的目标css文件

编译成功之后可以看到你的文件夹中多出了一个xx.css文件

当然这样其实不是非常方便，难道每次写好styl文件都要重新编译吗？
stylus 给我们提供了解决方式 只需要在原来的编译代码中加 -w

stylus -w xx.styl -o xx.css  //w就是watch 监听

这样就会实现当 styl 文件修改时 css 文件也会跟着修改

styl文件每次修改保存之后可以看到都会重新编译

当加上了-w 其实就是给css文件增加了一个监听,监听 styl 文件的变化, css 随之变化
注意: styl 文件必须保存之后才会生效哦~

styl 文件书写格式

1. 编写 styl 文件必须注意缩进

像这样不注意缩进编译成的css代码会乱码的哦
2. styl 文件强大的嵌套功能

如图,item2 是item1 的子容器,我们可以直接在item1 下写item2, 生成的css代码如上图右边显示.这强大的功能不仅节省了敲代码的时间,更加重要的一点是折叠功能,使得代码更具有可读性
如下图所示

stylus可以直接将整个大容器折叠,而css只能将每个容器单个折叠,这是stylus的核心功能之一 现在看起来似乎没有什么,但是如果是一个大的项目,那么css代码将会非常多,这个折叠功能就会显得尤为重要了!

总结

Stylus 的产生就是为了书写css时能够更省时间,更加有效率,笔者介绍的内容不是很多,如果想要详细了解更多内容建议可以看官方文档或者中文文档
如果有介绍的不对的地方望指正😊