工作记录：Stylus基础教程及应用
前言
传统CSS的缺陷
css的可重用性差、代码冗余量大、不支持语言特性如变量循环及方法等（虽然css也在慢慢支持，比如现在的css变量等，但明显这些远远不够）。
三大预处理
于是预处理器出现了：
- 2007年，第一款预处理器Sass诞生。Sass是迄今为止最成熟的预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LeSS影响，已经进化到了全面兼容CSS的SCSS。
- 2009年，受Sass的影响，Less出现了。与Sass相比，他更简单但可编程性不足。
- 2010年，Stylus自Node.js社区诞生，主要用于Node项目的预处理支持。因为诞生自Node社区，Stylus看起来更加的“编程化”，他支持变量运算、方法、剩余参数、迭代、条件判断、继承、混入等JS特性，看起来很“JavaScript”。
预处理器趋势对比
npm近五年的下载趋势：
GitHub近五年的活跃状态：
虽然Sass是最早诞生的预处理器，但是最受欢迎的处理器确实Less；同时关注度和社区活跃度最好的也是Less，其次是Stylus，Sass最末。
我们的选择
其实之前已经透露过，我们预处理器选择使用和我们团队同样年轻的Stylus，其原因如下：
- 功能强大，语法非常“JavaScript”。
- 语法精简灵活
- 只需要依赖NodeJS
- 方便易用
- 高效
如果你习惯了pug的语法，Stylus使用起来会感觉极度舒适。Stylus的语法和pug一样：基于缩进、省去重复的符号（{、}、;、:），这让代码看起来很简洁（他俩绝对是抄了Python的作业）
Stylus教程
思来想去，还是决定不做无意义的搬砖了，关于教程这一块张旭鑫大佬已经写得很好的（毕竟是css领域的大佬），相关教程可以参考：
风格约束
核心思想是，能少按一个键就少按，一个键，毕竟：
所以，代码风格应该是：
- 不写任何无意义的符号（简洁性）
- 层级基于嵌套（层次感）
- 冗余代码抽离成模块或者写成混入（Mixins）
- 极其相似又有规律可循的代码写成循环或者混入
一个小而不全的例子，例如我页面中有这样的结构：
<template lang="pug">
div(:class="$style.inner")
div(:class="$style.box")
</template>
那么我的样式应该这么写：
<style lang="stylus" rel="stylesheet/stylus" module>
.inner
position relative
color=#41b883
.box
position absolute
left 50%
top 50%
width 200px
height @width
margin-left -(@width/2)
margin-top -(@height/2)
background color
ear(direction=left)
breadth=40px
position absolute
content ''
width breadth
height breadth
{direction} 25%
transform-origin center
transform translate(direction is left?-50%:50%,-50%) rotate(-45deg)
background @background
&::after
ear()
&::before
ear(right)
</style>
Vue项目中使用
创建项目
在Vue项目中使用其实非常简单，直接Vue-ui一把梭
使用Vueui最大的好处是，我们只需要点点鼠标输入必要的内容，VueCli会自动帮我们完成：
完成上面操作创建项目之后，就可以在项目中使用Stylus了；当然，你的标签也要改成下面格式：
<style lang="stylus" rel="stylesheet/stylus" module> </style>
修改文件模板以获取新建文件支持
以webstrom为例，setting>Editor>File and Code Templates，选中Vue Single File Component，将
<style> </style>
改为：
<style lang="stylus" rel="stylesheet/stylus" module> </style>
此时，创建的Vue组件中默认使用Stylus。
老项目中使用
老项目中使用Stylus只需要下载stylus、stylus-loader即可，使用下面的命令安装
yarn add stylus stylus-loader npm i stylus stylus-loader
然后修改<style>标签
小程序中使用
因为微信小程序一个页面或组件对应wxss、wxml、js三个文件（有时候觉得挺蛋疼的），所以如果想要在小程序项目中使用Stylus，则必须将Stylus文件编译成wxss文件（TypeScript支持也是这么做的）。
解决方法其实也很多，如：webpack、glup等等。但是我们不需要这么麻烦，webstrom已帮你搞定，这也是我推崇webstrom的原因之一。
只需要在webstrom中稍微置一下即可：
当然，前提是你需要全局下载Stylus：
npm install stylus -g
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
