介绍
Stylus 是 css 非常优秀的一款预编译器。能够很简洁的实现css需要实现的功能。
究竟有多简洁呢?我们来看下面的代码:
上图使用的IDE是vscode,左边的是stylus代码,右边的是css代码,可以很明显的看到stylus的简洁程度。自从知道了stylus,
发现我已经不想再手写css格式的代码了!!!
安装
安装stylus前需要确保已经安装nodejs哦~
在vocode终端输入如下命令即可
npm i -g stylus
复制代码
验证是否安装成功 可以输入如下命令
stylus --version
复制代码
如图所示 可以看到stylus的版本号
简单使用
安装完成之后就可以按照如下步骤进行操作
首先在文件夹创建一个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 文件书写格式
编写 styl 文件必须注意缩进
像这样不注意缩进编译成的css代码会乱码的哦
2. styl 文件强大的嵌套功能
如图,item2 是item1 的子容器,我们可以直接在item1 下写item2, 生成的css代码如上图右边显示.这强大的功能不仅节省了敲代码的时间,更加重要的一点是折叠功能,使得代码更具有可读性
如下图所示
stylus可以直接将整个大容器折叠,而css只能将每个容器单个折叠,这是stylus的核心功能之一
现在看起来似乎没有什么,但是如果是一个大的项目,那么css代码将会非常多,这个折叠功能就会显得尤为重要了!
总结
Stylus 的产生就是为了书写css时能够更省时间,更加有效率,笔者介绍的内容不是很多,如果想要详细了解更多内容建议可以看官方文档或者中文文档
如果有介绍的不对的地方望指正😊