stylus在vue中的使用

stylus是一个css预处理器，比较流行的css预处理器有sass、less、stylus，它们都一样，都是css的语法糖，可以使用变量，可以有简单的逻辑，使css的开发效率更高，更易维护。stylus来自node社区，它的语法兼容性强，个人觉得也更加简洁，选择在vue中使用。

安装stylus

以webpack模板为例，在webpack的loader配置中，已经做好了stylus的兼容，build/utils.js中已有对loader的配置，但默认没有stylus包和loader包，需要安装：

cnpm i stylus -D
cnpm i stylus-loader -D

因为是预编译嘛，肯定不用-S了。cnpm确实是快…

内部stylus

vue-cli脚手架搭建的项目中用的是.vue文件，文件里面有三个部分，模板（template）、脚本（script）、样式表（style）。
其中的style，声明一下是stylus类型：

<style lang="stylus" rel="stylesheet/stylus">

</style>

就可以愉快的使用stylus了。

外部stylus

stylus文件后缀为.styl，不是.css，这和sass、less一样，要不然怎么知道用的是stylus语法。
外部建好文件以后，.vue中引入：

import '.styl路径'

就可以使用了

stylus语法

css的各预处理器学习门槛都是很低，毕竟只是语法糖。

segmentFault中的详细总结：
https://segmentfault.com/a/1190000002712872
大神的中文翻译手册：
http://www.zhangxinxu.com/jq/stylus/
stylus官方文档：
http://stylus-lang.com/