概述
什么是Stylus
- Stylus是一個CSS預(yù)處理器科汗。
什么是CSS預(yù)處理器
- 關(guān)于CSS預(yù)處理器，推薦先行閱讀這篇文章：為您詳細比較三個 CSS 預(yù)處理器（框架）：Sass斧抱、LESS 和 Stylus
現(xiàn)在你應(yīng)該對CSS預(yù)處理器有個大概的認識了娇豫，總的來說耀找，CSS預(yù)處理器為CSS提供了更多的更加靈活的可編程性此洲，是不是很棒厂汗！
選型
- 那么在SaaS，Less和Stylus中呜师，為什么選擇后者呢娶桦？因為Stylus是來源于Node.js社區(qū)，與js關(guān)系密切汁汗，所以基于Vue.js的開發(fā)衷畦，我們選擇使用Stylus。
配置Stylus環(huán)境
安裝
- 命令行中打
cnpm install stylus
image.png
在讓編輯器支持Stylus
編輯器選型
對于編輯器的選擇之前一直沒有單獨說過知牌，這里稍微提一下祈争，對于寫Vue或者前端代碼，這里推薦的有三個編輯器
- WebStorm
- VSCode
- Sublime Text
對于電腦配置較高的內(nèi)存較大的角寸，推薦使用WebStorm菩混，這個編輯器很智能也很龐大，對于電腦配置稍低的扁藕，推薦使用后面兩個沮峡。
另外，在編輯代碼時亿柑，當時用后兩種編輯器時邢疙，很依賴各種各樣的插件
當你覺得使用的時候很不爽的時候
就去網(wǎng)上搜相應(yīng)的插件
比如我需要Vue高亮語法的插件，就去搜索安裝Vue插件
那么對于Stylus望薄，我們也只需要安裝Stylus的插件就可以了疟游。
關(guān)于安裝插件，這里有幾個連接
- 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
你要做的
- 配置好環(huán)境故慈，保證能正常使用Stylus
- 學(xué)習(xí)Stylus的基礎(chǔ)語法
- 在開發(fā)中使用Stylus的便捷特性
參考教程
結(jié)束
var author = {
name:'丁波',
GitHub:'dingbo1028',
University:'BNUZ'
}
