Stylus介紹及特點
Stylus 是一個基於Node.js的CSS的預處理框架，誕生於2010年，比較年輕，可以說是一種新型語言，其本質上做的事情與 Sass/LESS 等類似， 可以以近似腳本的方式去寫CSS代碼，創建健壯的、動態的、富有表現力的CSS，默認使用 .styl 的作為文件擴展名，支持多樣性的CSS語法。Stylus比LESS更強大，而且基於nodejs比Sass更符合我們的思路。
Stylus的特點如下
基於js
Node.js是一個Javascript運行環境(runtime)，是對Google V8引擎進行了封裝，V8引擎執行Javascript的速度非常快，性能非常好。對於不了解Node.js的開發人員，不會增加太多學習成本。Stylus基於Node.js，換而言之，就是借助JavaScript讓CSS更富有表現力，更動態，更健壯！而且還有專門的JavaScript API。
支持Ruby之類框架
雖然Stylus基於Node.js，但是依然支持Ruby之類框架，還有FireBug插件FireStylus， sublimetext插件，便於開發、調試。
功能強大，使用靈活，支持多樣性的CSS語法
Stylus的功能比LESS強大，不遜於Sass。在用法上，支持傳統的CSS，而且相對於傳統的用法，更加簡潔、靈活，像省掉花括號、冒號，分號，甚至使用混合的CSS編程，Stylus都可以接受。
Stylus的優缺點
【優點】
解決樣式覆寫的問題，尤其是mixin式復用
使用純CSS，我們可以抽象出一些常用的布局CSS屬性組合，通過CSS的類組合來達成常見的mixin式復用，然而這種方案存在一些問題，例如:
當頁面重構時，需要頻繁修改class name，這個問題在后端人員掌握着視圖層的時候格外突出，前后端耗費很多溝通成本；
在約束上下文的時候非常無力，比如“只有在ul下面的img.db允許是display:block”的規則，寫成“ul img.db { display: block; }”就完全跑偏了，它違背了創建這個.db類時的本意，造成了代碼的可讀性和可維護性下降。
如果你要改動規則，需要同時修改HTML和CSS，也可能造成新的樣式問題。
而通過Stylus可以建立一種新的代碼風格，只允許CSS Class代表UI模塊的抽象，這樣一來，改動樣式時不至於通知后端改模板，然后在CSS Class內部實現mixin。而這正是CSS的短板，CSS體系內的用法只有復制粘貼。
可緩解多瀏覽器兼容造成的冗余
進入CSS3的時代，舊式CSS hack如filter，新式兼容前綴如-webkit-等，都是冗余，修改的時候也需要修改多處，不容易維護。在Stylus里面，寫個函數就能解決，多次復用也不需要看到如此之多的hack。
提高效率，節約成本
用Stylus開發CSS可以提高效率，它類似於一種CSS的方言，可以用更精簡的語法表達更多的意思。比如，Stylus中可以使用變量，比如和 UED 同學訂好各種樣式的規范，做好變量后開發中直接使用，避免頁面中的各種雜亂樣式。當樣式需求有變動時，也可以重新給變量賦值，一下改掉相關樣式，不用再一點一點的改。
使CSS開發更加靈活
Stylus可以使用變量、條件、循環，兼容傳統的CSS樣式，等等，可以讓CSS的開發和修改更加靈活。
【缺點】
開發過程增加步驟
CSS的好處在於簡便、隨時隨地被使用和調試，使用Stylus，增加了預編譯CSS的步驟，讓我們開發工作流中多了一個環節，調試也多了個步驟。
增加學習成本。
雖然Stylus簡單易學，可以兼容傳統CSS，但是當開發和維護團隊都從CSS過渡到Stylus時，還是需要一點學習成本的，而且初學者使用起來，不一定能明顯提高效率。
基本語法請點擊這里。
vue 引入 stylus
建立好項目后我們來安裝stylus
npm install stylus stylus-loader --save-dev
這樣就安裝上了stylus。
記得在 style 標簽加上：
<style scoped lang="stylus">
在vue組件中，在style標簽上添加scoped屬性，以表示它的樣式作用於當下的模塊，很好的實現了樣式私有化的目的，這是一個非常好的機制。但是要慎用！！！在實際業務中我們往往會對公共組件樣式做細微的調整，如果添加了scoped屬性，那么樣式將會變得不易修改。