概述
什么是Stylus
- Stylus是一個CSS預處理器。
什么是CSS預處理器
- 關於CSS預處理器，推薦先行閱讀這篇文章：為您詳細比較三個 CSS 預處理器（框架）：Sass、LESS 和 Stylus
現在你應該對CSS預處理器有個大概的認識了，總的來說，CSS預處理器為CSS提供了更多的更加靈活的可編程性，是不是很棒！
選型
- 那么在SaaS，Less和Stylus中，為什么選擇后者呢？因為Stylus是來源於Node.js社區，與js關系密切，所以基於Vue.js的開發，我們選擇使用Stylus。
配置Stylus環境
安裝
- 命令行中打
cnpm install stylus
image.png
在讓編輯器支持Stylus
編輯器選型
對於編輯器的選擇之前一直沒有單獨說過，這里稍微提一下，對於寫Vue或者前端代碼，這里推薦的有三個編輯器
- WebStorm
- VSCode
- Sublime Text
對於電腦配置較高的內存較大的，推薦使用WebStorm，這個編輯器很智能也很龐大，對於電腦配置稍低的，推薦使用后面兩個。
另外，在編輯代碼時，當時用后兩種編輯器時，很依賴各種各樣的插件
當你覺得使用的時候很不爽的時候
就去網上搜相應的插件
比如我需要Vue高亮語法的插件，就去搜索安裝Vue插件
那么對於Stylus，我們也只需要安裝Stylus的插件就可以了。
關於安裝插件，這里有幾個連接
- Sublime Text插件安裝方法和常用插件
- Sublime Text寫Vue
然后具體的不多說，大家可以百度谷歌
在編輯器安裝支持Stylus
- 這個就是在編輯器安裝Stylus高亮插件，sublime直接在搜索安裝Stylus，WebStorm不需要單獨安裝插件，新建Stylus文件是，只需要New->stylesheet->stylus即可
PS.Stylus的拓展名是
.styl
初次使用
初始化項目
vue init webpack styluscd styluscnpm installcnpm install stylus --save-devcnpm install stylus-loader --save-dev
image.png
cnpm run dev
使用Stylus
在.vue文件中使用
image.png
引入單獨的.styl文件
在寫css之前，我新建了幾個div
- 新建
.styl文件
image.png
- 編寫Stylus
image.png
- 引入文件
image.png
- 查看效果
image.png
你要做的
- 配置好環境，保證能正常使用Stylus
- 學習Stylus的基礎語法
- 在開發中使用Stylus的便捷特性