概述

什么是Stylus

• Stylus是一個(gè)CSS預(yù)處理器。

什么是CSS預(yù)處理器

• 關(guān)于CSS預(yù)處理器，推薦先行閱讀這篇文章：為您詳細(xì)比較三個(gè) CSS 預(yù)處理器（框架）：Sass、LESS 和 Stylus
  現(xiàn)在你應(yīng)該對(duì)CSS預(yù)處理器有個(gè)大概的認(rèn)識(shí)了，總的來(lái)說(shuō)，CSS預(yù)處理器為CSS提供了更多的更加靈活的可編程性，是不是很棒！

選型

• 那么在SaaS，Less和Stylus中，為什么選擇后者呢？因?yàn)镾tylus是來(lái)源于Node.js社區(qū)，與js關(guān)系密切，所以基于Vue.js的開(kāi)發(fā)，我們選擇使用Stylus。

配置Stylus環(huán)境

安裝

• 命令行中打cnpm install stylus

image.png

在讓編輯器支持Stylus

編輯器選型

對(duì)于編輯器的選擇之前一直沒(méi)有單獨(dú)說(shuō)過(guò)，這里稍微提一下，對(duì)于寫(xiě)Vue或者前端代碼，這里推薦的有三個(gè)編輯器

• WebStorm
• VSCode
• Sublime Text

對(duì)于電腦配置較高的內(nèi)存較大的，推薦使用WebStorm，這個(gè)編輯器很智能也很龐大，對(duì)于電腦配置稍低的，推薦使用后面兩個(gè)。
另外，在編輯代碼時(shí)，當(dāng)時(shí)用后兩種編輯器時(shí)，很依賴各種各樣的插件
當(dāng)你覺(jué)得使用的時(shí)候很不爽的時(shí)候
就去網(wǎng)上搜相應(yīng)的插件
比如我需要Vue高亮語(yǔ)法的插件，就去搜索安裝Vue插件
那么對(duì)于Stylus，我們也只需要安裝Stylus的插件就可以了。
關(guān)于安裝插件，這里有幾個(gè)連接

• Sublime Text插件安裝方法和常用插件
• Sublime Text寫(xiě)Vue
  然后具體的不多說(shuō)，大家可以百度谷歌

在編輯器安裝支持Stylus

• 這個(gè)就是在編輯器安裝Stylus高亮插件，sublime直接在搜索安裝Stylus，WebStorm不需要單獨(dú)安裝插件，新建Stylus文件是，只需要New->stylesheet->stylus即可

PS.Stylus的拓展名是.styl

初次使用

初始化項(xiàng)目

• vue init webpack stylus
• cd stylus
• cnpm install
• cnpm install stylus --save-dev
• cnpm install stylus-loader --save-dev

image.png

• cnpm run dev

使用Stylus

在.vue文件中使用

image.png

引入單獨(dú)的.styl文件

在寫(xiě)css之前，我新建了幾個(gè)div

• 新建.styl文件

image.png

• 編寫(xiě)Stylus

image.png

• 引入文件

image.png

• 查看效果

image.png

你要做的

• 配置好環(huán)境，保證能正常使用Stylus
• 學(xué)習(xí)Stylus的基礎(chǔ)語(yǔ)法
• 在開(kāi)發(fā)中使用Stylus的便捷特性

參考教程

• Stylus中文文檔
• 官方文檔

結(jié)束

var author = {
  name:'丁波',
  GitHub:'dingbo1028',
  University:'BNUZ'
}