stylus 詳解與引入

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屬性，那麼樣式將會變得不易修改。