關于sass:
Sass 是一款強化 CSS 的輔助工具，它在 CSS 文法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等進階功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式檔案，以及更高效地開發項目。 點選連結可進入sass官網
檔案字尾是.scss，在此之前我們先一步一步對頁面進行樣式測試。
1.進入web端
cd web npm run serve 
如果admin端已經開啟8080端口，再開啟web端就是8081端口了。
此時我們在web檔案夾中添加style.css檔案，設定頁面樣式：
再到main.js引入該頁面樣式檔案：
頁面發生了變化，效果樣式css的引入沒問題：
2.安裝sass
（1）我們先把style.css檔案字尾改為.scss，然後main.js同樣對引入的style檔案進行修改：
此時頁面報錯，說在web端檔案中找不到sass-loader：
（2）我們安裝sass-loader：
cd web npm i -D sass-loader 由于sass是強化css的輔助工具，是以隻在我們開發時使用sass，待我們項目完成上線時sass就沒有任何作用了。是以我們使用-D在生産環境安裝。
-D即--dev（生産）
包名會被注冊在package.json的devDependencies裡面，僅在開發環境下存在的包用-D，如babel，sass-loader這些解析器
可惜，可惜，無論如何都安裝不成功：）想盡一切辦法
最終，我簡單粗暴地安裝了cnpm，使用cnpm下載下傳了node-sass和sass-loader，原因是sass-loader依賴于node-sass，npm都下載下傳不成功，大家如果npm下載下傳不成功也可以使用cnpm：
npm i cnpm
cnpm i node-sass -d
cnpm i sass-loader -d 可能是由于淘寶當時引入的cnpm庫中的sass-loader沒有被更新，好像sass安裝後來被官方改為隻能由ruby安裝等原因，但是不深究，我們得到結果就好。
安裝sass-loader成功之後，頁面發生了變化：
應該是sass-loader版本号太高所緻，此時vue-cli中使用到的webpack不能使用版本過高的sass-loader，是以我們下載下傳7.3.1版本：
cnpm install [email protected] -D 重新進入web端
ctrl + c
y回車
npm run serve 進入後頁面再次發生變化，此時顯示node-sass版本過高，讓我們使用4.0.0版本：
這時我們解除安裝之前版本的node-sass，安裝4.0.0版本
cnpm uninstall node-sass cnpm i [email protected] -d 安裝完成後，再次重新開機web端。此時頁面正常進入：
3.使用sass
因為sass是css工具，是以.scss檔案可以使用css一切樣式，這時我們測試第一個功能——嵌套。
首先我們修改目前vue頁面元素：
這時我們使用嵌套方法：
就像html語言中的嵌套元素一樣，把元素按父子級嵌套。
p{
color:red;
}
.a{
background:red;
p{
color: blue;
}
} 4.總結
sass的優勢：sass通過變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等進階功能，增加了效果樣式css的複用性、美觀性和易讀性。
接下來的文章中我們就會使用sass編輯前端樣式，一起學習sass除嵌套以外的其他功能。