前言
傳統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領域的大佬），相關教程可以參考：
Stylus中文版參考文檔
Stylus官網
風格限制
核心思想是，能少按一個鍵就少按，一個鍵，畢竟：
是以，代碼風格應該是：
- 不寫任何無意義的符号（簡潔性）
- 層級基于嵌套（層次感）
- 備援代碼抽離成子產品或者寫成混入（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 如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起讨論學習，一起進步。
