stylus介紹與引入

Stylus的介紹

Stylus 是一個基於Node.js的CSS的預處理框架，誕生於2010年，比較年輕，能夠說是一種新型語言，其本質上作的事情與 Sass/LESS 等相似， 能夠以近似腳本的方式去寫CSS代碼，建立健壯的、動態的、富有表現力的CSS，默認使用 .styl 的做爲文件擴展名，支持多樣性的CSS語法。

【優勢】

解決樣式覆寫的問題，尤爲是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的開發和修改更加靈活。

vue 引入 stylus

創建好項目後咱們來安裝stylus

npm install stylus stylus-loader --save-dev

這樣就安裝上了stylus。

記得在 style 標籤加上：

<style scoped lang="stylus">

注意: npm run build 時記得修改 config 文件夾下的 index.js 中的 build 對象。

 

基本使用

參考：https://www.jianshu.com/p/5fb15984f22d

媒體查詢參考：https://stylus.zcopy.site/docs/media.html